-
useState와 useEffect를 넘어선 고급 React HooksReact 2024. 1. 29. 14:11728x90
React의 Hooks 도입은 함수형 컴포넌트 개발에 혁신을 가져왔으며, 상태 관리와 부수 효과(side effects)를 다루는 더 강력하고 유연한 방법을 제공합니다.
useState와 useEffect는 널리 사용되고 있지만, React 애플리케이션을 크게 향상할 수 있는 다양한 고급 hooks가 더 있습니다.
1. useCallback
useCallback은 메모이제이션된(memoized) 콜백 함수를 반환하는 훅입니다.
특히 복잡한 로직이 있는 컴포넌트나 함수를 props로 받는 컴포넌트에서 불필요한 렌더링을 방지하는 데 매우 유용합니다.
- 큰 리스트나 테이블의 성능 최적화.
- 자식 컴포넌트의 불필요한 렌더링 방지.
const memoizedCallback = useCallback( () => { // 여기에 복잡한 로직 }, [dependencies], );
2. useMemo
useMemo는 useCallback과 유사하지만, 함수가 아닌 계산된 값에 대해 메모이제이션을 합니다.
렌더링마다 실행되는 것을 원치 않는 계산이 있을 때 사용하는 훅입니다.
- 무거운 계산 함수.
- 비용이 많이 드는 재계산 방지.
const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);
3. useReducer
useReducer는 useState의 대안으로, 더 복잡한 상태 로직을 관리하는 데 이상적입니다.
렌더링 성능을 최적화하고 상태 전환을 더 예측 가능하게 관리할 수 있습니다.
- 여러 입력값을 가진 폼의 상태 관리.
- 여러 하위 값들이 포함된 복잡한 상태 로직 관리.
const [state, dispatch] = useReducer(reducer, initialState);
4. 실제 사용 사례
- useCallback: 많은 항목을 가진 할 일(to-do) 앱에서 각 항목마다 토글 함수를 가지고 있다고 상상해 보세요. useCallback을 사용하면 이러한 함수들이 필요하지 않은 경우 재생성되지 않도록 하여 불필요한 렌더링을 줄일 수 있습니다.
- useMemo: 데이터 분석 앱에서, 데이터 세트가 부분적으로 변경될 때 복잡한 데이터 인사이트의 재계산을 방지하기 위해 useMemo를 사용할 수 있습니다.
- useReducer: 다단계 폼에서, useReducer는 NEXT_STEP, PREVIOUS_STEP, UPDATE_FIELD와 같은 다양한 액션을 useState보다 훨씬 관리하기 쉬운 방법으로 처리할 수 있습니다.
5. 최적의 실천 방법 및 성능 고려 사항
이러한 훅들은 강력하지만, 다음과 같은 최적의 실천 방법을 따라야 합니다:
- useCallback과 useMemo를 신중하게 사용하세요. 과도한 사용은 메모리 오버헤드를 초래할 수 있습니다.
- 의존성 배열에 올바르게 의존성을 나열해야 합니다.
- 복잡한 상태 로직에는 useReducer를 사용하여 가독성과 예측 가능성을 유지하세요.
useCallback, useMemo, useReducer와 같은 고급 React 훅을 탐험하는 것은 애플리케이션의 성능과 코드의 유지 관리를 크게 향상할 수 있습니다.
'React' 카테고리의 다른 글
Cypress vs Playwright E2E 테스트 프레임워크 비교 (2) 2024.02.13 고급 React Hooks 사용을 위한 팁과 요령 (0) 2024.02.05 React useEffect vs useLayoutEffect 차이점 알아보기 (0) 2022.12.15 Stylelint를 이용해 css 정리하기 (feat. Styled-Components) (0) 2022.11.14 React 디자인패턴 (0) 2022.10.07