면접 단골 질문 - React Hook을 알고 있나요? 어떤것들이 있나요?

React Hook의 개념 정리

React Hook은 함수형 컴포넌트에서 상태(state)와 생명주기(lifecycle) 기능을 사용할 수 있게 해주는 React 16.8에서 도입된 기능입니다. Hook을 사용하면 클래스 컴포넌트를 작성하지 않고도 React의 다양한 기능을 활용할 수 있습니다.

1. useState

useState는 함수형 컴포넌트에서 상태를 관리할 수 있게 해주는 Hook입니다.

import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

useState는 현재 상태값과 이를 업데이트하는 함수를 반환합니다.

2. useEffect

useEffect는 컴포넌트가 렌더링될 때마다 특정 작업을 수행하도록 설정할 수 있는 Hook입니다.

import React, { useState, useEffect } from 'react';

function Example() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    document.title = `You clicked ${count} times`;
  });

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

useEffect는 컴포넌트가 마운트되거나 업데이트될 때 실행됩니다.

3. useContext

useContext는 React의 Context API를 더 쉽게 사용할 수 있게 해주는 Hook입니다.

import React, { useContext } from 'react';

const ThemeContext = React.createContext('light');

function ThemedButton() {
  const theme = useContext(ThemeContext);
  return <button theme={theme}>I am styled by theme context!</button>;
}

useContext를 사용하면 컴포넌트 트리 깊숙이 있는 데이터도 쉽게 접근할 수 있습니다.

4. useReducer

useReducer는 복잡한 상태 로직을 관리할 때 useState의 대안으로 사용할 수 있는 Hook입니다.

import React, { useReducer } from 'react';

function reducer(state, action) {
  switch (action.type) {
    case 'increment':
      return {count: state.count + 1};
    case 'decrement':
      return {count: state.count - 1};
    default:
      throw new Error();
  }
}

function Counter() {
  const [state, dispatch] = useReducer(reducer, { count: 0 });
  return (
    <>
      Count: {state.count}
      <button onClick={() => dispatch({type: 'decrement'})}>-</button>
      <button onClick={() => dispatch({type: 'increment'})}>+</button>
    </>
  );
}

useReducer는 상태 업데이트 로직을 컴포넌트에서 분리할 수 있게 해줍니다.

5. useMemo와 useCallback

useMemo와 useCallback은 성능 최적화를 위해 사용되는 Hook입니다.

useMemo는 계산 비용이 높은 함수의 결과값을 메모이제이션합니다:

const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);

useCallback은 인라인 콜백과 그것의 의존성 배열을 전달받아 메모이제이션된 버전의 콜백을 반환합니다:

const memoizedCallback = useCallback(
  () => {
    doSomething(a, b);
  },
  [a, b],
);

결론

React Hook은 함수형 컴포넌트에서 React의 다양한 기능을 사용할 수 있게 해주는 강력한 도구입니다. 이를 통해 더 간결하고 재사용 가능한 코드를 작성할 수 있으며, 상태 관리와 사이드 이펙트 처리를 더욱 효과적으로 할 수 있습니다. Hook을 잘 이해하고 적절히 사용하면 React 애플리케이션의 품질과 유지보수성을 크게 향상시킬 수 있습니다.