3. DeleteDiary, diaryKey 값 유지

일기장 삭제, 새로고침 diaryKey 값 초기화 되지 않고 저장

※ filter 함수를 이용해서 일기 삭제

   -filter() : 주어진 함수의 조건을 만족하는 배열의 요소들만 모아(true면 유지, false면 버림) 새로운 배열로 반환함.

※ diaryKey이 중복되지 않도록 localStorage에 diaryKey 저장

 

component

  -Input.JSX

  -Button.JSX

  -Textarea.JSX

  -DiaryWrite.JSX

  -DiaryBlock.JSX

module

  -Diary.JSX

css

  -Diary.css

 

component - <DiaryBlock.JSX> : 클릭하면 일기 삭제

import React from 'react'
import '../css/Diary.css'
import Button from './Button'

function DiaryBlock({title, content, id, deleteDiary}) {
  const handleDelete = () => { //클릭하면 삭제
    deleteDiary(id)
  }

  return (
    <div className="blockDiv" key={id}>
      <div className="blockTitleDiv">
        <h3 className="blockTitle">{title}</h3>
        <Button className={'deleteButton'} onClick={handleDelete} name={'삭제'} />
      </div>
      <p>
        ---------------------------------------------------------------------------------------------
      </p>
      <h4>{content}</h4>
    </div>
  )
}

export default DiaryBlock

 

Diary.css

.blockTitleDiv {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.blockTitle {
  margin-right: auto;
  margin-top: 10px;
  margin-bottom: 0;
}

.deleteButton {
  font-size: 15px;
  padding: 3px 10px 3px 10px;
  margin-right: 30px;
  margin-top: 10px;
  background-color: rgb(211, 211, 211);
}

 

module - <Diary.JSX> : filter 함수를 이용해서 일기 삭제, localStorage에 diaryKey 저장

import React, {useEffect, useRef, useState} from 'react'
import DiaryWrite from '../component/DiaryWrite'
import DiaryBlock from '../component/DiaryBlock'

function Diary() {
  const [diary, setDiary] = useState(JSON.parse(localStorage.getItem('Diary')) || [])

  const diaryKey = useRef(parseInt(localStorage.getItem('DiaryKey')) || 0)
  //localStorage에 diaryKey가 저장되있으면 불러옴

  const addDiary = (title, content) => {
    const newDiary = {
      title,
      content,
      id: diaryKey.current
    }
    diaryKey.current += 1
    setDiary([newDiary, ...diary])
  }

  const deleteDiary = id => { //일기 삭제 함수
    const remainDiary = diary.filter(remove => remove.id !== id) //해당 id를 제외하고 다른 id들로만 새로운 배열 생성
    setDiary(remainDiary)
  }

  useEffect(() => {
    localStorage.setItem('Diary', JSON.stringify(diary))
    localStorage.setItem('DiaryKey', parseInt(diaryKey.current)) //localStorag에 diaryKey 값을 저장
  })

  return (
    <div>
      <div>
        <DiaryWrite addDiary={addDiary} />
      </div>
      <div>
        {diary.map(diaryData => {
          return (
            <DiaryBlock key={diaryData.id} {...diaryData} deleteDiary={deleteDiary} />
          )
        })}
      </div>
    </div>
  )
}

export default Diary

 

삭제 버튼을 클릭 시 리스트에서 일기 삭제