한입크기 리액트 일기장6(배열 사용하기5 - 데이터 수정하기)

기존 삭제하기 버튼을 함수로 바꿔준다.

DiaryItem

const handleRemove = () => {
  if(window.confirm(`${id}번째 일기를 정말 삭제하시겠습니까?`)){
    onRemove(id);
  }
}

<button onClick={handleRemove}>삭제하기</button>

수정하기 버튼 만들어주기

import { useState } from 'react';

const [isEdit, setIsEdit] = useState(false);
const toggleIsEdit = () => setIsEdit(!isEdit);

<div className="content">
  {isEdit? (
   <>
   	<textarea/>
   </>
   ) : (
     <>{content}</>
   )}
</div>

<button onClick={toggleIsEdit}>수정하기</button>

isEdit으로 수정중인지 아닌지, true/false로 구분하여
수정 중일때는 textarea를 표시하고, 아니면 content의 값(내용)을 보여주게한다.(삼항연산자 사용)

textarea 핸들링하기

const [localContent, setLocalContent] = useState('');

<textarea
  value={localContent}
  onChange={(e)=>setLocalContent(e.target.value)}
/>

수정중인 상태에 따라, 버튼 변경하기

{isEdit?(
  <>
  <button onClick={toggleIsEdit}>수정 취소</button>
 <button>수정완료</button>
 </>
 ):(
   <>
   <button onClick={handleRemove}>삭제하기</button>
<button onClick={toggleIsEdit}>수정하기</button>
</>
)}

수정하기 버튼 클릭 시, textarea의 값은 기존 content 내용 넣어주기

const [localContent, setLocalContent] = useState(content);

수정 취소 버튼 클릭 시, textarea의 값을 변경해도, 기존의 content 내용 넣어주기

const handleQuitEdit = () => {
  setIsEdit(false);
  setLocalContent(content);
}

<button onClick={handleQuitEdit}>수정 취소</button>

수정완료버튼

data의 값을 변경해주어야 하기때문에, App.js에서 작성해주어야한다.
App.js

const onEdit = (targetId, newContent) => {
    setData(
      data.map((it)=>
        it.id === targetId ? {...it, content:newContent} : it
      )
    )
  }
data의 값 

data의 값 중 targetId 와 동일한 값을 찾아 기존값은 그대로 넣어주고, content만 newContent로 바꿔준다.

onEdit을 기존 onRemove 처럼 각 컴포넌트에 함수를 내려준다.

<DiaryList diaryList={data} onEdit={onEdit} onRemove={onRemove}/>

DiaryItem.js

import { useState, useRef } from 'react';

const DiaryItem = ({
  author, 
  content, 
  created_date, 
  emotion, 
  id, 
  onRemove,
  onEdit
})

const localOCntentInput = useRef();

const handleEdit = () => {
  if(localContent.length < 5){
    localOCntentInput.current.focus();
    return;
  }

  if(window.confirm(`${id}번째 일기를 수정 하시겠습니까?`)){
    onEdit(id, localContent);
    toggleIsEdit();
  }    
}

 <button onClick={handleEdit}>수정완료</button>

전달받은 onEdit 활용해, 수정완료하기 버튼 완성해주기.
기존과 동일하게 content갯수를 확인해 갯수가 5개이하라면 포커스를 넣어준다.