리액트의 useCallback useMemo 남용에관하여
useMemo를 써야할 때와 쓰지 않아야할 때를 구분하는 방법
- 6강 애플리케이션 관리하기
🌟 props
- Props는 React 컴포넌트 간 데이터를 전달하는 방법. 부모 컴포넌트에서 자식 컴포넌트로 데이터를 내려줄 때 사용.
- 리액트는 DOM갱신이나 재렌더링을 효율적으로 스케줄링하기 위해 상태 갱신을 일괄 처리한다.
- 단방향 데이터 흐름을 갖는다.
🌟 useCallback
-
콜백 함수 재정의를 방지하기 위해 사용된다.
-
렌더링 사이의 함수의 정체성을 유지하여 성능 최적화.
-
⚠️ useCallback은 Hook이므로, 컴포넌트의 최상위 레벨 또는 커스텀 Hook에서만 호출할 수 있다. 반복문이나 조건문 내에서 호출할 수 없다. 이 작업이 필요하다면 새로운 컴포넌트로 분리해서 state를 새 컴포넌로 옮겨야한다.
-
props의 참조 동일성
React 컴포넌트는 부모에서 받은 props가 변경되면 리렌더링된다. 하지만 객체나 함수가 props로 전달될 경우, 매 렌더링마다 새로운 참조값이 생성된다.=> useCallback을 쓰는 이유
deps가 변경되지 않는 한 동일한 함수 객체를 반환하므로, props로 전달될 때 참조 동일성이 유지
- 7장 useMemo로 상태관리하기
🌟 useMemo
- 계산이 필요한 함수에서 렌더링될 때마다 함수가 계산되어 불필요하게 함수가 호출되는 것을 막기 위해 사용
- 비싼 연산을 캐싱하여 성능 최적화
- useMemo는 의존 관계 목록을 이전 목록과 비교하여 각 목록이 같은 값들을 같은 순서로 포함하면 저장된 값을 반환한다.
- ⚠️ 메모리 사용량이 증가할 수 있음으로 성능 최적화가 필요한 곳에서만 사용할 것
생성함수란?
객체를 반환하는 함수로 useMemo또는 useCallback의 첫 번째 인수로 사용된다.
비싼 연산 구별법?
console.time('filter array');
const visibleTodos = useMemo(() => {
return filterTodos(todos, tab);
}, [todos, tab]);
console.timeEnd('filter array');useMemo와 useCallback의 차이점?
두 Hook 모두 자식 컴포넌트를 최적화할 때 사용된다.
어떤 것을 전달할 때 캐싱처리를 해준다.
useMemo는 값을 캐싱하고 useCallback은 함수자체를 캐싱한다.
⛔️ 남용하지 말 것!
- 계산 결과를 캐싱하기 위한 메모리 사용량이 늘어난다. 가비지 컬렉터가 캐싱된 데이터는 처리하지 않기 때문에 일정 기간 사용되지 않더라도 메모리에 남아있는다.
- 최적화의 비용은 공짜가 아니다!
- useCallback은 제공된 deps(의존성배열)를 기준으로 반환된 함수 객체를 메모이제이션 하는 것 뿐이다. 즉, 동일한 deps가 제공되면 (참조로 비교) 동일한 함수 객체를 반환한다.
☘️👀 느낀 것
결론: 성능 최적화의 핵심은 병목현상 해결!
시스템 최적화에서 가장 중요한 것은 가장 큰 병목이 어디에서 발생하는지를 찾는 것이다.
useMemo와 useCallback 같은 성능 최적화용 Hook을 사용할 때는, 단순히 리렌더링을 줄이는 것에 집중하기보다 코드 전반의 구조와 흐름을 고려하는 것이 중요하다.
최적화의 비용은 공짜가 아니므로, 불필요한 최적화를 지양하고, 코드의 짜임새와 유지보수성을 함께 고민해야 한다.
즉, 부분이 아닌 전체적인 숲을 바라보며 성능 최적화를 적용하는 것이 핵심이다!
