리액트에서의 수정 기능

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

수정하기 상태를 나타내는 setState함수를 생성한다.초기값을 false(불리언 값)으로 설정하여 만약 isEdit state값이 True인 경우 수정 중으로 간주한다. false라면 수정 중이 아니므로 그냥 렌더링하게 된다.

const toggleIsEdit = () => setIsEdit(!isEdit);

toggle isEdit 함수는 호출되는 순간 원래 isEdit이 갖고 있던 값을 반전시킨다. isEdit이 true였다면 false로 false였다면 true로 바꾼다. 수정이 완료되면 원래 상태로 되돌아가게 하기 위함이다.

<div className="content">
                {isEdit ? (
                <>
                    <textarea />
                </> 
                ) : ( 
                <>{content}</>)}
</div>
<button onClick={handleRemove}>삭제하기</button>
<button onClick={toggleIsEdit}>수정하기</button>

위에선 수정하기 버튼에 onClick 이벤트에 toggleIsEdit 함수를 줌으로써 수정하기 버튼을 클릭할 때마다 isEdit 의 state가 바뀌도록 했다.
그리고 content div에는 안에서는 isEdit이 true일 때는 textarea 가 나타나고 아닐 떄는 원래 content가 뜨도록 했다. 이제는 textarea에 작성한 또는 수정한 값을 렌더링 시키기 위해 또 다른 state를 생성해야 한다.

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

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

localContent state를 생성한 후 textarea에 value로 locaContent와 onChange이벤트로 setLocalContent를 설정한다. setLocalContent에 수정한 값인 e.target.value를 매개변수로 설정하면 수정한 값이 렌더링된다. useState(content)로 설정하면 수정폼에서 기존 값을 기반으로 수정할 수 있다.

수정 취소를 눌러도 바꾼 값이 textarea에 남음

const handleQuitEdit = () => {
        setIsEdit(false);
        setLocalContent(content);
    };
    
`
`
`
<button onClick={handleQuitEdit}>수정 취소</button>

handleQutiEdit 함수는 setIsEdit의 state를 수정취소 상태인 false로 바꾸고 content를 관리하는 setLocalContent에 현재 content를 매개변수로 넣으면 수정 취소 전 원래 값을 유지되도록 한다. 수정 취소 버튼에 onClick 이벤트로 handleQutiEdit 을 넣어 수정 취소 버튼을 눌러도 바꾼 값이 textarea에 남지 않도록 했다.

---

• 리액트 특성 상 데이터는 위에서 아래로 이벤트는 아래에서 위로 가기 때문에 수정완료 이벤트를 실제 웹에서 반영시키려면 현재 다이어리 아이템에서 앱 컴포넌트까지 전달해야 한다. -> 앱 컴포넌트에 수정하는 기능을 가지는 함수를 만들어 다이어리 아이템 컴포넌트에 다시 보내줘야 한다.

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

원본 데이터 배열의 map이라는 내장함수를 이용해 모든 요소를 순회하여 새로운 배열은 만든다. 순회하면서 매개변수로 받은 targetId가 id와 일치할 경우 수정대상임을 의미하므로 content를 newContent로 바꾼다. 아니라면 원래의 데이터를 리턴한다.

import DiaryItem from "./DiaryItem";

const DiaryList = ({onEdit, onRemove, diaryList}) => {

    return (
        <div className="DiaryList">
            <h2>일기 리스트</h2>
            <h4>{diaryList.length}개의 일기가 있습니다.</h4>
            <div>
                {diaryList.map((it)=> (
                    <DiaryItem key={it.id} {...it} onEdit={onEdit} onRemove={onRemove}/>
                ))}
            </div>
        </div>
    );
};

export default DiaryList;

-> DiaryList파일의 prop으로 onEdit을 전달하고 파일 내 태그 속성으로 onEdit을 전달한다.

      const handleEdit = ()=>{
        if(localContent.length < 5){
            localContentInput.current.focus();
            return;
        }
                                
        if(window.confirm(`${id}번 째 일기를 수정하시겠습니까?`)){
            onEdit(id,localContent);
            toggleIsEdit();  
        }
    }
	.
    .
    .
    <button onClick={handleEdit}>수정 완료</button>

수정 완료 버튼의 onClick이벤트로 handleEdit 함수를 설정한다.
수정완료 버튼 클릭 시 브라우저 창에 알림을 띄우고 확인하면 onEdit 의 state가 바뀌면서 수정이 완료되었다. 수정이 완료되면 isEdit 의 state를 false로 만드는 toggleIsEdit 가 수행되어 수정 완료 작업이 끝나게 된다.