❗️useMemo,useCallback 문법 학습시 업데이트 하겠습니다.
리액트 재렌더링 조건
1.state(상태) 변경이 있을 때
리액트는 state 변경이 감지되면 재렌더링 한다.
2.새로운 props가 들어올 때
부모 컴포넌트로부터 새 props가 들어오면 자식 컴포넌트는 재렌더링 된다.
3.기존 props가 업데이트 됐을 때
부모 컴포넌트로부터 받은 props가 변경되면 props 값을 받은 자식 컴포넌트도 재렌더링 된다.
4.부모 컴포넌트가 재렌더링 될 때
부모 컴포넌트가 업데이트 되어 재렌더링 되면 자식 컴포넌트도 재렌더링 된다.
렌더링 성능 최적화 방법
과도한 재렌더링은 성능 저하의 원인이 된다. 필요할 때만 재렌더링 될 수 있도록 하는 방법으로 최적화 작업을 해줄 수 있다.
컴포넌트 내에 어떤 함수가 값을 리턴하는 데 많은 시간을 소요한다면 매번 재렌더링하는 게 부담될 수 있다. 자식 컴포넌트에서 그 리턴 값을 받아서 사용한다면 자식 컴포넌트도 함수가 호출될 때마다 재렌더링 해야 할 것이다.
1.useMemo 사용
useMemo 훅을 사용하면, 함수의 종속 변수들이 변경되지 않았다면 해당 함수를 호출하지 않는다. 따라서 불필요한 재렌더링 현상을 방지할 수 있다. 자식 컴포넌트는 함수의 종속 변수들이 변경될 때만 재렌더링 된다.
useMemo는 memoization 된 함수를 넘겨주는 게 아닌 함수의 리턴 값을 넘겨주기 때문에, 함수 props의 불필요한 재렌더링은 막아줄 수 없다.
2.useCallback 사용
부모 컴포넌트에서 자식 컴포넌트로 함수 props를 넘겨줄 때 useCallback을 사용해보자.
부모 컴포넌트가 재렌더링할 때마다 동일한 props 값을 전달하더라도 새로운 콜백이 발생하기 때문에 자식 컴포넌트도 리렌더링을 하게 되는 경우가 발생한다.
부모 컴포넌트가 재렌더링 될 때마다 함수도 새로 생성되기 때문에, 자식 컴포넌트도 새로운 props로 인식하고 재렌더링하게 된다. 이를 방지하기 위해서는 useCallback을 사용하여 함수의 값이 바뀌었을 때만 재렌더링 되도록 해야한다.
