컴포넌트에 memo를 사용해서 렌더링의 최적화를 도와준다.
성능 최적화를 위해서는 가장 작은 단위의 컴포넌트부터 시작하고, 하나씩 테스트를 해보면서 렌더링을 체크한다.
useRef & useEffect
렌더링 테스트를 위해서 사용할 수 있다.
const ref = useRef([]);
useEffect(() => {
ref.current = [props데이터1, 2, 3];
console.log(props데이터1 === ref.current[0] , props데이터2 === ref.current[1]...)
}, [props로 받은 데이터1,2,3])
이처럼 가장 하위의 data부터 체크해가며 값이 true인지 false인지 확인하고 원하지 않는 렌더링이 되는지를 체크한다.
+ 이 과정을 줄여주는 기능이 memo
컴포넌트 단에 memo()를 사용하면, 렌더링을 최적화 해준다.
useMemo
반환 값의 컴포넌트에 직접적으로 구현을 해, 컴포넌트를 기억해준다.
useMemo( () => <></>, [] )
이와같이 사용
