4. EditDiary

일기장을 수정

※true, false에 따라 수정 textarea, 수정/적용 버튼 나타내기

※ map 함수를 이용해 지정한 id에 content만 변경

 

component

  -Input.JSX

  -Button.JSX

  -Textarea.JSX

  -DiaryWrite.JSX

  -DiaryBlock.JSX

module

  -Diary.JSX

css

  -Diary.css

 

component - <DiaryBlock.JSX> : 수정 textarea 나타내기

import React, {useState} from 'react'
import '../css/Diary.css'
import Button from './Button'
import Textarea from './Textarea'

function DiaryBlock({title, content, id, deleteDiary, editDiary}) {
  const [editBool, setEditBool] = useState(true) //수정 textarea 유무
  const [editValue, setEditValue] = useState(content) //수정 textarea에 content 값 적용

  const changeEditValue = event => { //수정 입력값 지정
    setEditValue(event.target.value)
  }

  const handleDelete = () => {
    deleteDiary(id)
  }

  const handleEdit = () => { //버튼 클릭하면 일기 수정
    if (editBool === true) {
      setEditBool(false)
    } else {
      setEditBool(true)
      editDiary(id, editValue) //일기 수정
    }
  }

  return (
    <div className="blockDiv" key={id}>
      <div className="blockTitleDiv">
        <h3 className="blockTitle">{title}</h3>
        <Button className={'deleteButton'} onClick={handleDelete} name={'삭제'} />
        <Button
          className={'editButton'}
          onClick={handleEdit}
          name={editBool ? '수정' : '적용'}
        />
      </div>
      <p>
        ---------------------------------------------------------------------------------------------
      </p>
      {editBool ? (
        <p>{content}</p>
      ) : (
        <Textarea
          className={'writeContentTextarea'}
          value={editValue}
          onChange={changeEditValue}
        />
      )}
    </div>
  )
}

export default DiaryBlock

 

Diary.css

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

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

 

module - <Diary.JSX> : map 함수를 이용해 지정한 id에 content만 변경

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)

  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)
    setDiary(remainDiary)
  }

  const editDiary = (id, editContent) => { //수정 함수
    setDiary(diary.map(edit => (edit.id === id ? {...edit, content: editContent} : edit)))
    //해당 ID의 content 값만 변경
  }

  useEffect(() => {
    localStorage.setItem('Diary', JSON.stringify(diary))
    localStorage.setItem('DiaryKey', parseInt(diaryKey.current))
  })

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

export default Diary

 

수정 버튼을 클릭하면 수정 textarea가 뜸

적용 버튼을 클릭하면 일기 내용이 수정