- 따라하며 배우는 리액트 A-Z를 수강하며 개인적으로 메모한 내용입니다.
Memoization
: 이전에 계산한 값을 메모리에 저장하여 동일한 입력일때 캐시된 결과를 반환하는 기술. > 랜더링 비용 최적화
지금부터 나열될 최적화 방법은 이 기술에서 기인했다.
> 불필요한 사용을 남발하면 메모리 차지 때문에 오히려 성능이 나빠질 수 있으니 주의!
React.memo > 렌더링 최적화
프로젝트를 만들때 재사용성 등을 위해 *컴포넌트를 분리하게 된다.
여기서 리액트는 State 값이 변경될때마다 랜더링을 한다는 것을 상기하다보면 값이 바뀌지 않는 컴포넌트 까지 굳이 랜더링 될 필요가 없다는 점이 걸린다.
이것의 해결법이 React.memo다.
react는 랜더링할때 props를 비교한다. hook 사용으로 state나 context가 변할 때는 정상적으로 랜더링 되지만, 컴포넌트가 동일한 props로 동일한 결과를 렌더링해낸다면, React.memo를 호출하고 결과를 메모이징(Memoizing)하도록 래핑하여 React는 컴포넌트를 렌더링하지 않고 마지막으로 렌더링된 결과를 재사용한다. >> 성능향상
props 비교에 있어 얕은 비교가 기본 동작이지만 다른 비교동작을 원한다면, 공식 문서 참조
사용법
const <컴포넌트명> = React.memo(() => { ... ... }); export default <컴포넌트명>
* 컴포넌트: 프로그래밍에 있어 재사용이 가능한 각각의 독립된 모듈
useCallback > 함수 최적화
컴포넌트가 랜더링 될 때, 그 안에 있는 함수도 다시 선언하게 된다. > 의도하지 않았다면 좋지 못한 현상
나쁜 예시 : 함수가 자식 컴포넌트에 props를 내려준다면 자식 컴포넌트도 리랜더링되는 현상 발생
React.memo와 마찬가지로, props 가 변하지 않는 이상 기존 함수를 재사용한다.
사용법
useCallback 안에 콜백함수와 의존성 배열을 순서대로 삽입const <함수명> = useCallback(<함수>, <함수가_의존하는_변수_배열>); //ex const add = () => x + y; const add = useCallback(() => x + y, [x, y]);
useMemo > 결과 값 최적화
함수의 인자 값이 이전에 넘겨주었던 값과 동일하다면 함수를 실행시키지 않고, 캐시된 결과 값을 재사용하여 반환한다. > 연산 속도 감소
사용법
const <변수명> = useMemo(() => <실행할_연산>, <의존하는_변수_배열>); //ex const value = useMemo(() => compute(x, y), [x, y]);
