Update 컴포넌트란?

게시글의 내용을 수정하거나 기존 데이터를 업데이트하는 기능을 리액트에서 구현할 땐 Update 컴포넌트를 사용합니다. 이 컴포넌트는 수정하고자 하는 데이터를 입력 필드에 바인딩하고, 수정 후 제출하면 상위 컴포넌트로 데이터를 다시 전달하여 상태를 변경합니다.

1. App 컴포넌트에서 Update 모드 구현

먼저 mode가 'UPDATE'일 때 실행할 코드를 작성합니다. 기존 데이터를 기반으로 Update 컴포넌트를 생성하고, 수정된 데이터를 받아 setTopics로 갱신합니다.

alt text

  • 기존 제목과 본문을 가져와 초기값으로 설정하고, 수정이 완료되면 해당 데이터를 교체합니다.

  • 불변성 유지를 위해 기존 배열을 복사한 후 새로운 객체로 갱신합니다.

2. Update 컴포넌트 정의하기

Update 컴포넌트는 useState()를 사용해 입력값을 상태로 관리하며, onChange와 onSubmit을 통해 값을 전달합니다.

alt text

  • value={title}, value={body}와 같은 상태 바인딩을 통해 입력 필드가 상태를 반영하도록 연결합니다.

  • 사용자가 입력을 수정할 때마다 onChange를 통해 상태를 갱신합니다.

  • submit 시 부모 컴포넌트(App)로 데이터가 전달됩니다.

3. 정리

  • Update 컴포넌트는 기존 데이터를 바탕으로 입력폼을 만들어 사용자가 직접 수정할 수 있게 합니다.

  • 상태를 입력창과 연결(value 바인딩)하고, 변경시 상태 갱신(setState)을 수행합니다.

  • App 컴포넌트에서는 새로운 객체를 만들어 기존 리스트를 갱신하며 불변성을 지키는 방식으로 상태를 변경해야 리액트가 제대로 렌더링할 수 있습니다.