[React] 배열안의 데이터 수정하기

삭제하기 버튼 옆에 수정하기 버튼을 만들고 일기를 수정할 수 있게 만들어보자.

 

1. 수정하기 버튼 만들기

2. isEdit이라는 state를 만들어 버튼을 클릭했을 때 true가 되고 수정할 수 있는 칸이 나오게 해보자

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

toggleIsEdit을 만들어 isEdit을 반전시키는 토글 함수를 만들고 버튼에 onClick 이벤트에 toggleIsEdit을 넣어주자.

 

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

일기가 들어가는 content부분에 삼항연산자를 사용하여 isEdit이 true일 때는 textarea가 뜨고 false일 때는 원래의 콘텐츠가 나오도록 해준다.

 

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

수정버튼을 클릭했을 때 수정 취소와 수정 완료 버튼이 나오게끔 삼항연산자를 이용해 써주고 "수정하기", "삭제하기" 버튼의 위치를 삼항연산자로 옮겨준다.

 

데이터는 위에서 밑으로 흐르고 이벤트는 밑에서 아래로 흐른다. 수정버튼을 클릭했을 때 수정이 되려면 상단 App에서 data를 수정해주어야 한다.

 

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

  return (
    <div className="App">
      <DiaryEditor onCreate={onCreate} />
      <DiaryList onEdit={onEdit} onRemove={onRemove} diaryList={data} />
    </div>
  );

 App.js에서 수정하는 함수 onEdit을 만든다. onEdit은 수정될 대상인 targetId, 수정된 콘텐츠인 newContent를 인자로 받는 함수이다. setData에서 map으로 id가 targetId와 같다면 content를 newContent로 바꿔준다.

 

onEdit을 DiaryList로 전달하고 -> DiaryItem으로 전달

 

<DiaryItem.js>

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

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

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

수정완료 버튼의 onClick에 handleEdit을 넣어주고 콘텐츠의 길이가 5글자 미만이라면 수정칸에 focus가 가도록 하였다.