React.memo를 사용하여 컴포넌트 성능 최적화


export default React.memo(컴포넌트명);

함수가 렌더될때 바뀌지 않게 하기.

React.memo를 사용하는 것만으로 컴포넌트 최적화가 끝나진 않는다.

useState의 배열 상태가 변할때, 해당 state에 연결된 함수도 새롭게 바뀌기 때문이다.

배열상태를 업데이트 하는 과정에서, 최신 상태의 state를 참조하기 때문에 배열이 바뀔 때 마다 함수가 새로 만들어진다.

이렇게 함수가 계속 만들어지는 상황을 방지하는 방법은 2가지이다.


const [number, setNumber] = useState(0);

const onIncrease = useCallback(() => setNumber((prevNumber) => prevNumber + 1));

useReducer(1,2,3)

1번 파라미터에 Reducer함수

2번 파라미터에 초기 상태 넣어준다.

3번 파라미터에 초기상태를 만들어주는 함수를 집어넣는다. -> 컴포넌트가 맨 처음 렌더링 할때만 함수가 호출된다.

성능상으로는 함수형이나 useReducer나 비슷하니 골라서 사용하면 된다.