왜 렌더링이 되는지 원인 찾기

useEffect, useRef를 사용할 수 있다.

//TestBox라는 컴포넌트
const TestBox = ({data1, data2, data3}) => {
  
  const ref = useRef([]);
  
  useEffect(() => {
    // 이 중에 false가 찍히면 그것 때문에 자꾸 렌더링이 발생하는 것임.
    console.log(
      data1 === ref.current[0],
      data2 === ref.current[1],
      data3 === ref.current[2]
    );
    
    ref.current = [cellIndex, rowIndex, cellData, dispatch];
  }, [data1, data2, data3]);
  
  return <div>test box!</div>

}