애드블럭 종료 후 보실 수 있습니다.

ABOUT ME

-

Today
-
Yesterday
-
Total
-
  • useState와 useEffect를 넘어선 고급 React Hooks
    React 2024. 1. 29. 14:11
    728x90

    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 훅을 탐험하는 것은 애플리케이션의 성능과 코드의 유지 관리를 크게 향상할 수 있습니다.

    댓글

Designed by Tistory.