TIL 23.07.10 모달창에서 Update 하기

문제점

모달의 수정창에서 수정하기를 누르면 계속해서 마지막 게시글만 수정되는 문제점이 있었음. 팀 과제할 때 이 문제가 너무 뚜렷하게 나타나서 고생했던 기억이 있었다. 원인은 모달창을 열게되면, 그 마지막 게시글의 post.id 를 가진 모달이 맨 위로 열리기때문에, 항상 같은 값만 수정되는 것이었다. 

 

시도해본 것

console.log() 로 문제가 어디서 발생하는지 확인을 하였다.

모달의 수정창에 진입 => 제대로 된 post.id 값을 받아옴. 그러나 이후 등록버튼을 누르면, post.id 가 마지막 게시글의 id 로 바뀌어 버림.

 

해결방안

튜터님께 찾아가니, 문제가 어디서 생기는지 아니까 useState  를 이용해서 등록버튼을 누를때, 받아오는 post.id 값을 modalId 로 설정해보라고 하셨다. 이렇게 간단하게 해결할 수 있는 문제를 한시간동안 머리싸매고 있었다.

 

다음처럼 modalId 에 대한 state 값을 설정해주고,

  const [modalId, setModalId] = useState("");

 

모달창을 열 때, 다음처럼 각각의 cocktail.id 를 modalId로 설정해준다.

setModalId(cocktail.id);

 

등록버튼을 누를때 이처럼 modalId 값을 보내면,

<button onClick={(e) => updateHandler(modalId, e)}>
	등록
</button>

해당하는 cocktail.id 의 값이 modalId 가 되어 원활하게 수정이 된다.

 

알게된 것

여러개 리스트 있는것에 모달을 적용시키면 모달의 id 는 개별 요소의 id 가 되는게 아니라, 맨 마지막 요소의 id 값이 되버려서 마지막 게시글만 수정된다. 이를 해결하기 위해서는 useState 를 통해 임의로 모달id 값을 지정해서 해당하는 요소의 id 가 수정될 수 있게끔 해줘야 한다. 이번에 개인과제를 하면서 모달을 다시 쓰게돼서, 이 부분에 대해서 명확하게 인지하고 갈 수 있었던 것 같다.