[TIL] 8/13

콘솔찍기

버튼 눌렀을 때, 해당 게시글의 id를 알아보기위해

<button type="button" onClick={() => console.log(diary.id)}>

수정중인 일기의 id 추적하기 : editId

const [editId, setEditId] = useState(null);

왜 editId가 필요한가?

1. 수정 중인 일기를 추적하기 위해:

   • editId는 현재 수정 중인 일기의 ID를 저장합니다. 이렇게 하면 사용자가 "수정" 버튼을 눌렀을 때, 어떤 일기가 수정 중인지 추적할 수 있습니다.

2. 수정 여부를 판단하기 위해:

   • submitBtn 함수에서, editId가 null인지 아닌지를 확인함으로써, 현재 폼 제출이 새로운 일기를 추가하는 것인지, 기존 일기를 수정하는 것인지를 구분할 수 있습니다.
   • editId가 null이 아니면, 이미 존재하는 일기를 수정 중이라는 의미이며, 해당 일기의 ID를 유지하면서 내용을 업데이트합니다.

3. 수정 완료 후 초기화:

   • 수정이 완료되면, setEditId(null);를 호출하여 editId를 다시 null로 설정합니다. 이렇게 해야 다음번에 새 일기를 작성할 때, 수정 중인 상태가 아닌 새 일기 작성 상태로 전환됩니다.

코드 흐름 요약:

1. 수정 버튼 클릭 시:

   • editBtn(id) 함수가 호출되고, editId에 수정할 일기의 ID가 저장됩니다.
   • 이 ID는 폼에 기존 제목과 내용을 채워 넣는 데 사용됩니다.

2. 폼 제출 시:

   • submitBtn 함수가 호출되면서, editId가 null이 아닌지 확인합니다.
   • editId가 null이 아니면 기존 일기의 내용을 업데이트하고, 그렇지 않으면 새 일기를 추가합니다.

3. 수정 완료 후:

   • setEditId(null);로 editId를 초기화하여 수정 상태를 종료합니다.

결론:

editId 상태는 수정 중인 일기를 정확하게 추적하고, 해당 일기의 내용을 업데이트하는 데 필수적입니다. 이 상태 변수가 없으면, 수정 작업과 새 일기 추가 작업을 구분할 수 없게 되므로, 이 코드가 반드시 필요합니다.