useEffect의 불완전한 의존성 배열

useEffect의 의존성 배열

useEffect(() => { 
	console.log(id);
},[]);

useEffect의 의존성 배열을 빈 배열로 설정하면 컴포넌트가 마운트될 때마다 실행된다. 만약 특정값이 바뀔 때마다 출력되게 하려면 빈 배열안에 특정값을 넣으면 된다.

useEffect의 불완전성

useEffect(() => {
  console.log(id, checkedValues[id]);
}, [checkedValues[id]]);

위 코드에서는 'useEffect'의 의존성 배열에 'checkValues[id]'만 포함되어 있다.그래서 React는 해당 의존성이 변경될 때만 'useEffect'를 실행하려고 하고, 'id'에 대한 의존성이 누락되어 있다. 이런 경우 React는 불완전한 의존성 배열이라고 판단하고 경고를 내린다.

'useEffect'는 함수 내부에서 참조하는 모든 변수를 의존성 배열에 포함해야 한다.

불완전성 해결

useEffect(()=>{
    const handleCheckboxChange = () =>{ // 체크박스 상태 변경 시 콘솔에 출력 
      console.log(id,checkedValues[id]);
    };

    document.getElementById(`checkBoxCnt_${id}`).addEventListener(
      'change',handleCheckboxChange);

    return() => {
      document.getElementById(`checkBoxCnt_${id}`).removeEventListener(
        'change',handleCheckboxChange);
  
    }
  },[checkedValues,id]);

'useEffect'에서 체크박스의 'change' 이벤트에 대한 리스너를 등록하여 해당 이벤트 발생 시에만 콘솔에 출력되도록 했다. 이러면 'useEffect'의 의존성 배열에서 id 만을 포함시켜 불필요한 리렌더링을 줄일 수 있다.

오류 발생

다른 페이지로 넘어갈 때 "Uncaught TypeError: Cannot read properties of null (reading 'removeEventListener')" 라는 오류가 발생해 렌더링되지 않는 문제가 발생했다.

해결

지정된 id를 가진 요소가 페이지에 있는지 확인하는 조건문을 추가해 해결했다. 이미 DOM 요소가 제거된 상태에서 클린업 코드가 실행되면 'getElementById'가 null을 반환하므로 요소가 있는지 확인하는 작업을 거쳐야 한다.

useEffect(() => {
  const handleCheckboxChange = () => {
    console.log(id, checkedValues[id]);
  };

  const checkboxElement = document.getElementById(`checkBoxCnt_${id}`);

  if (checkboxElement) {
    checkboxElement.addEventListener('change', handleCheckboxChange);
  }

  return () => {
    if (checkboxElement) {
      checkboxElement.removeEventListener('change', handleCheckboxChange);
    }
  };
}, [checkedValues, id]);

• 만약 요소가 있다면 이벤트리스너 등록
• 요소가 없다면 (null 반환) 이벤트 리스너를 추가 또는 제거하지 않으므로 타입에러가 발생하지 않는다.