[React] 게시글 수정 기능

✏️구현코드 + 코드에 대한 로직 설명

App.js (추가된 코드)

  const onEdit = (targetId, newContent) => {
    setData(
      data.map((it) =>
        it.id === targetId ? { ...it, content: newContent } : it)
    )
  }
  
   return (
    <div className='App'>
      <DiaryEditor onCreate={onCreate} />
	  // onEdit 추가
      <DiaryList onEdit={onEdit} onRemove={onRemove} diaryList={data} /> 
    </div>
  );

---

it.id === targetId ? { ...it, content: newContent } : it 

이 부분은 현재 순회 중(...it)인 객체 it의 id 속성이 targetId와 일치하는지 확인한다.

• 일치O : 새로운 내용 newContent로 content 속성을 수정한 객체를 반환
• 일치X : it 객체를 그대로 반환 (변화X)

---

DiaryItem.js (추가된 코드)

const DiaryItem = ({ onEdit, onRemove, id, author, content, emotion, created_date }) => {
    const [isEdit, setIsEdit] = useState(false)
    const toggleIsEdit = () => setIsEdit(!isEdit)
    const [localContent, setLocalContent] = useState(content)
    const localContentInput = useRef()
	
    const handleRemove = () => {
        if (window.confirm(`${id}번째 일기를 정말 삭제하시겠습니까?`)) {
            onRemove(id)
        }
    }
    
    const handleQuitEdit = () => {
        setIsEdit(false)
        setLocalContent(content)
    }

    // 수정하려고 입력한 content값이 5 이하인 경우-> focus()
    const handleEdit = () => {
        if (localContent.length < 5) {
            localContentInput.current.focus()
            return
        }
        if (window.confirm(`${id}번째 일기를 수정하시겠습니까?`)) {
            onEdit(id, localContent)
            toggleIsEdit()
        }
    }

useState를 이용해 수정되는 content값 관리

DiaryItem.js (return 부분 추가)

return (
  ...
  
  <div className="content">
      {isEdit ? (
      <>
      <textarea
          ref={localContentInput}
          value={localContent}
          onChange={(e) => setLocalContent(e.target.value)}
      />
      </>
      ) : (
      <>{content}</>
      )}
   </div>
   {isEdit ? <>
      <button onClick={handleQuitEdit}>수정 취소</button>
      <button onClick={handleEdit}>수정 완료</button>
      </> : <>
      <button onClick={handleRemove}>삭제하기</button>
      <button onClick={toggleIsEdit}>수정하기</button>
   </>}
 )

• isEdit가 활성화 O (true) : '수정취소'와 '수정완료' 버튼 나타탐
• isEdit가 활성화 X (false) : '삭제하기' 버튼과 '수정하기'버튼 나타남

+) 추가로 DiaryList.js에도 onEdit을 추가해줘야함

• 'onEdit'은 'DiaryList' 컴포넌트의 props 중 하나

<DiaryItem key={it.id} {...it} onEdit={onEdit} onRemove={onRemove} />