React Hooks

React Hooks 는 함수형 컴포넌트에서 상태와 사이드 이펙트를 관리를 쉽게할 수 있도록 도와주는 기능입니다. 나아가 컴포넌트 로직을 더 간결하고 가독성 있게 다룰 수 있도록 해줍니다. 그럼, 주요 Hooks 및 사용법을 알아봅시다! 🚀

1. useState: 컴포넌트 상태 관리

• 사용법:

  const [state, setState] = useState(initialValue);

• 팁:
  초기 값이 계산이 무거워질 경우, 콜백 함수로 가져오기:

  const [state, setState] = useState(() => computeInitialValue());

• 정리:
  • useState는 컴포넌트의 로컬 상태를 관리할 때 사용됩니다.
  • 배열 구조분해를 통해 현재 상태와 상태를 업데이트하는 함수를 얻을 수 있습니다.

2. useEffect: 사이드 이펙트 처리

• 라이프사이클:
  • 마운트: 초기 렌더 이후 실행됨.
  • 업데이트: 각 업데이트 이후 실행됨.
  • 언마운트: 컴포넌트가 언마운트되기 전 정리 작업.
• 사용법:

  useEffect(() => {
    // 여기에 로직 작성
    return () => {
      // 정리 작업
    };
  }, [의존성 배열]);

• 정리:
  • useEffect는 컴포넌트의 부작용(데이터 가져오기, 구독 등)을 처리합니다.
  • 두 번째 매개변수로 의존성 배열을 전달하여 해당 의존성이 변경될 때만 useEffect가 실행됩니다.

3. useRef: 지속 변수

• 목적:
  • useRef는 렌더링 간에 변수를 유지할 때 사용되며, 값이 변경되어도 리렌더링을 유발하지 않습니다
  • DOM 요소에 직접 접근하고 상호 작용.
• 예시:

  const myRef = useRef(initialValue);

4. useContext: 전역 상태 관리

• 상황:
  • 프롭스 드릴링 없이 전역 데이터 공유.
  • 깔끔한 방식으로 여러 프롭스 전달 대체.
• 예시:

  const MyComponent = () => {
    const data = useContext(MyContext);
    // 여기에 컴포넌트 로직 작성
  };

• 정리:
  • useContext는 컴포넌트 트리에서 전역으로 상태를 공유할 때 사용됩니다.
  • MyContext는 createContext를 통해 생성된 컨텍스트 객체여야 합니다.

5. 최적화 Hooks

• useMemo: 메모이제이션
  • 계산 결과를 캐시하고 재사용하여 성능 향상.
• useCallback: 메모이제이션된 콜백
  • 불필요한 함수 재생성 방지를 위한 메모이제이션.
• 정리:
  • useMemo는 특정 값의 계산을 메모이제이션하여 성능을 최적화합니다.
  • useCallback은 메모이제이션된 콜백 함수를 생성하여 불필요한 재생성을 방지합니다.

6. useReducer: 복잡한 상태 관리

• 사용 시점:
  • 복잡한 상태 로직 다룰 때.
• 컴포넌트:
  • 리듀서: 상태 업데이트를 담당하는 함수.
  • 디스패치: 상태 업데이트를 요청하는 메서드.
  • 액션: 업데이트 유형을 설명하는 객체.
• 예시:

  const [state, dispatch] = useReducer(reducer, initialState);

• 정리:
  • useReducer는 복잡한 상태 로직을 다룰 때 사용되며, 상태를 업데이트하는 함수(reducer)와 상태를 요청하는 메서드(dispatch)를 제공합니다.

7. React.memo: 성능 최적화

• 목적:
  • 불필요한 렌더를 방지하기 위해 함수형 컴포넌트 메모이제이션.
• 사용법:

  const MemoizedComponent = React.memo(MyComponent);

• 정리:
  • React.memo를 사용하면 컴포넌트가 동일한 props로 렌더링될 때만 리렌더링이 발생하도록 할 수 있습니다.

8. 커스텀 Hooks: 재사용 가능한 로직

• 생성:
  • "use"로 시작하는 함수명 사용.
  • 독립적인 상태와 이펙트 캡슐화.
• 예시:

  const useFetch = (url) => {
    // 데이터 가져오기에 대한 커스텀 로직
  };

• 정리:
  • 커스텀 훅을 사용하면 로직을 모듈화하고 여러 컴포넌트에서 재사용할 수 있습니다.

React Hooks는 강력한 기능이지만, 목적을 이해하고 필요할 때 현명하게 사용하는 것이 깔끔하고 효율적인 코드를 작성하는 데 중요합니다!