보다 나은 내일, 다이어리

https://ko.reactjs.org/docs/strict-mode.html#detecting-unexpected-side-effects

const toggleTodo = (id, setTodos) => {
  console.log(id, "할일체크표시");
  setTodos((prev) => {
    return prev.map((item) => {
      if (item.id === id) {
        console.info(item);
        item.done = !item.done;
      }
      return item;
    });
  });
};
...
<CheckCircle onClick={() => toggleTodo(id, setTodos)}>
  {done ? <YesDone /> : <NotYet />}
</CheckCircle>

위의 코드를 보면, 할일 완료버튼을 toggle해주는 함수인 toggleTodo가 있다.

하지만 react 공식문서 내용을 바탕으로 처음 토글 시도에서는 의도대로 setTodos가 한 번만 실행되는 것 같지만, 두번째 토글 시도부터는 의도하지 않았는데 두 번 실행되는 것을 볼 수 있다. (그래서 토글을 해도 토글하지 않아 보인다. -1+1처럼.)

그래서 공식문서에 나와있는 해결책대로 strict mode를 해제해주면 위와 같은 이슈는 발생하지 않는다.

하지만, 과연 이게 맞는 해결책일까? 의문점이 든다.

• strict mode를 계속 유지하고 싶은 상황인데 단지 이 이슈때문에 strict mode를 빼는 것인데...
• strict mode는 부작용을 발견하게 도와주는 모드다. 그렇다면, 현재 내 코드에는 부작용이 생겼기 때문에 좋지 않은 코드인 게 아닐까?

item.done = !item.done 에서 item.done = !done으로 바꿨더니 문제가 바로 해결되었다…!!

const toggleTodo = (id, done, setTodos) => {
  console.log(id, "할일체크표시");

  setTodos((prev) => {
    return prev.map((item) => {
      if (item.id === id) {
        item.done = !done;
      }
      return item;
    });
  });
};

왜지?

item.done = !item.done 사용할 때

react-devtools-backend.js 이란 파일에서도 실행되는데, item.done이 여기서도 바뀌게 된다. true -> false -> true

setTodos((prev) => {
  return prev.map((item) => {
    if (item.id === id) {
      console.log("안녕?");
      console.log("전", item.done);
      item.done = !item.done;
      console.log("후", item.done);
    }
    return item;
  });
});

item.done = !done 사용할 때

react-devtools-backend.js 파일에서 실행될 때, item.done이 바뀌게 되지 않는다. true -> false -> false

setTodos((prev) => {
  return prev.map((item) => {
    if (item.id === id) {
      console.log("안녕?");
      console.log("전", item.done);
      item.done = !done;
      console.log("후", item.done);
    }
    return item;
  });
});

react-devtools는

React로 빌드된 웹 사이트를 디버깅하는 React Developer Tools 브라우저 확장 프로그램이다.

페이지 내 components를 한 눈에 볼 수 있고 react로 개발한다면 용이한 확장 프로그램이다. 

🤔생각해보자

• done 은 고정된 값이다! react-devtools-backend.js 에 의해서 백그라운드?에서도 한 번 더 실행될 때 !done 으로 결과는 같게 나오지만,
• item.done 은 계속 변화되는 값이다! todoItem.js 에서 일단 한번 실행되고, 또 react-devtools-backend.js 에서도 한 번 더 실행되기 때문에 결국은 토글되지 않은 것처럼 보인 것이다.

🤗결론

• react-devtools-backend.js 이 파일이 어떤 코드인지는 잘..모르겠지만.. 함수를 두 번 실행하게 하는 코드가 있는 것 같다. 
• strict mode를 제거하지 않고 싶은 상황이라면, 고정된 값을 할당함으로써 여러번 함수가 실행되더라도 의도했던 대로 작동할 수 있다.