데이터를 수정하고 화면에 렌더링해보자

donggae·2023년 11월 5일

React

목록 보기

6/8

전 장에서 데이터를 추가하고, 삭제해보는 기능까지는 해보았다.
해당 데이터를 수정해서 그 수정한 값을 렌더링 해보자

DataItem.jsx

const DataItem = ({ id, name, content, score }) => {
  return (
    <div clssName="DataItem">
      <h2>
        {id}. {name}
      </h2>
      <div>{content}</div>
      <div>점수 : {score}</div>
      <div>
        <button onClick={handleRemove}>삭제 하기</button>
      </div>
    </div>
  );
};

현재 DataItem 컨포넌트는 데이터를 삭제하는 기능만 있다 이제 수정 할 수 있기 위해선 다음과 같이 진행해보자

해당 컴포넌트에서 수정을 하는지 안하는지에 대한 상택값이 필요하다.

수정을 한다면 false 수정을 하지 않는다면 true로 상태값을 업데이트한다.

수정 여부에 따라 렌더링 되는 내용이 바뀌어야한다.

상태값을 이용하여 렌더링 되는 것을 조절한다.

수정을 하고 최종 데이터를 최상위 컴포넌트에 전달해준다.

이러한 순서를 통해 수정한 값을 화면에 렌더링 해보자

1. 컴포넌트의 상태값을 추가해보자

DataItem.jsx

const DataItem = () => {
  const [isEdit, setIsEdit] = useState(false);
};

수정 버튼을 눌렀을 때 해당 useState값을 true로 바꿔주면 해당 사용자가 수정을 하구나, 하지 않구나를 알 수 있다.

2. 상태에 따른 렌더링 업데이트

상태에 따른 렌더링을 하기 위해선 해당 버튼을 눌렀을 때
상태를 바꿔야하고 바꼈다면 업데이트를 해줘야한다.

DataItem.jsx

const DataItem = () => {
  const [isEdit, setIsEdit] = useState(false);
  
  const toggleEdit = () => setIsEdit(!isEdit);
  
  const handleQuitEdit = () => {
    setIsEdit(false);
  };
  
  return (
    <div className="DataItem">
      <div className="SubjectContent">
        {isEdit ? (
          <>
            <textarea />
          </>
        ) : (
          <>{content}</>
        )}
      </div>
      <div className="BtnArea">
        {isEdit ? (
          <>
			<button onClick={handleQuitEdit}>수정 취소</button>
            <button>수정 완료</button>
          </>
        ) : (
          <>
            <button onClick={toggleEdit}>수정 하기</button>
            <button onClick={handleRemove}>삭제 하기</button>
          </>
        )}
      </div>
    </div>
  );
};
export default DataItem;

이제 해당 상태에 따라 버튼 + 수정할 수 있는 textarea까지 렌더링 되는걸 볼 수 있다.

3. 수정이 완료된 데이터를 화면에 렌더링 해보자

DataItem.jsx

const DataItem = ({ onEdit }) => {
  const [localContent, setLocalContent] = useState(content);

  const handleChangeContent = (e) => {
    setLocalContent(e.target.value);
  };

  const handleEdit = () => {
    onEdit(id, localContent);
    toggleIsEdit();
  };
  
  return (
    // ...
    <button onClick={handleEdit}>수정 완료</button>
    // ...
  );
};

DataItem에서 현재 content의 내용 바뀐 content의 내용을
[localContent, setLocalContent]로 관리를 하고, onEdit를 통하여
해당 id, content내용을 전달해준다.

App.jsx

function App() {
  const OnEdit = (targetId, newContent) => {
    setData(
      data.map((it) =>
        it.id === targetId ? { ...it, content: newContent } : it
      )
    );
  };
}