230615) React에서 state를 변경했음에도 불구하고 렌더링이 제대로 일어나지 않는 현상

To do List를 만드는 과정에서 완료, 취소 버튼을 누르면 각각 Working에 있던 것은 Done으로, Done에 있던 것은 Working으로 향하는 기능을 구현해야 했다.

 

그런데 state를 활용해 변형을 시켜보아도 랜더링이 제대로 되지 않는지, console.log에는 제대로 된 값이 직혀 나오지만 화면에 변화가 없었다.

 

그리고 input에 값을 입력하면 그제서야 바뀐 값에 맞는 위치로 들어가는 현상이 보이기도 했다.

 

결론적으로 말하자면, 이는 JS 고유의 불변성과 관련 있는 것으로 state를 변경하였으나 메모리의 주소값은 변경되지 않은 것으로 인지해 렌더링이 일어나지 않았던 것이었던 듯하다.

 

따라서 기존 value 값을 변경한 뒤, 기존에 있던 객체를 새로운 객체로 복사해 주고, 새로운 객체를 setState에 넣어줌으로써 문제가 해결되었다. 해결을 위해 작성한 코드는 아래와 같다.

const cancleChangeHandler = function (item) {
    item.isDone = false;
    const item2 = { ...item };
    setIsDone(item2);
  };

(여기서 item은 보시다시피 객체입니다!!)

 

오늘도 잘 해냈다!