[React] Checkbox와 API연결하기 (첫 클릭시 Boolean 전환 안되는 현상 해결)

Checkbox와 API를 연결할 때 첫 클릭시 Boolean이 전환되지 않는 경우가 생겼는데, 생각보다 해결이 안돼서 애를 먹었다. 

 

 

tsx파일

// Checkbox 부분을 제외한 나머지 전부 생략
// props로 todo 데이터를 받아오는 상황

const TodoList = ({ todo }) => {
    const [isCheck, setIsCheck] = useState(todo.isCompleted); // 서버로부터 boolean값을 받음
    
    const todoCheckbox = useCallback(() => {
      setIsCheck(!isCheck);
    }, [isCheck]);

   useEffect(() => {
    axios({
      // ... 생략
      data: {
        isCompleted: isCheck,
      },
    });
  }, [isCheck])
  
  return (
    <input type="checkbox" className="mr-2" checked={isCheck} onChange={todoCheckbox} />
  )
};

 

나의 경우 계속 todoCheckbox부분에서 axios를 쏴주고 있었는데 이러면 첫 클릭시 어떤 방법을 써도 boolean이 변하지 않았다. 그러니까 서버에서 true를 받아온다면 첫 클릭시 isCheck가 false가 되어야 하는데 true가 나왔다.

 

뭐가 문제인가 해서 이것저것 다 해본 결과 해결 방법은 되게 간단했다. useEffect에서 isCheck를 []안에 넣어주고 데이터를 fetch해주면 끝이었다. isCheck가 변할 때 마다 리렌더링이 되기 때문이다.

 

기초적인 부분인데 최근에 리액트를 좀 안만졌다고 해결법이 바로 안떠오르다니.. 싶었던 작업이었다.