section6 7-5. 테이블 최적화 하기

1. useCallback 사용하기

보통 함수를 props로 넘겨줄 때 useCallback을 사용하여 넘겨준다. (굳이 props로 안넘기는 상황에서도 많이 사용하는거 같음) 

근데 useCallback 주의점은 함수 내부에서 '바뀌는' state나 props를 사용하는 로직이 있다면 의존배열에 꼭 추가시켜주어야한다.

기억력이 너무 강력해서 처음 state값 그대로 가지고 있어버리는 문제를 발생시킬 수 있다.

 

2. 어떤 값 때문에 리렌더링 되는지 찾는 방법

const Td = ({rowIndex, cellIndex, dispatch, cellData}) => {
	const ref = useRef([]);
    useEffect(()=>{
    	console.log(rowIndex === ref.current[0], cellIndex=ref.current[1], dispatch=ref.current[2],cellData=ref.current[3]);
    	ref.current = [rowIndex, cellIndex, dispatch, cellData];
    },[rowIndex, cellIndex, dispatch, cellData]);
}

console.log에서 false가 나오는 값 때문에 리렌더링이 일어나는 것이다.

 

3. React.memo 사용하기

부모가 리렌더링 될 때 자식의 불필요한 리렌더링을 막고 싶다면 React.memo를 사용하자!

(강의에서는 이것으로 해결함!! 내가 클릭한 td만 리렌더링 되도록)

 

4. useMemo로 컴포넌트 자체를 기억할 수도 있다.

최후의 수단으로 활용해보라고 하심.

내부에 들어있는 내용물이 바뀌었을 때만 새로 랜더링하고 그 외에는 랜더링하지 않는 예제.

const Tr = ({rowData, rowIndex, dispatch})=>{
	...
    return (
    	{
        	Array(rowData.length).fill().map((td,i)=>{
            	useMemo(
                	() => <Td ~ ></Td>,
                    [rowData[i]]
                )
            });
        }
    )
}

 

※ react dev tools로 highlight를 사용해 최적화해야할 것들을 고를 때 빨간색만 조심하면 된다고하심. 실제로 빨간색은 서비스할 때 성능상의 문제가 나타난다고 하셨다.