React Hooks

1) useState

상태(state)를 함수형 컴포넌트에서 사용할 수 있게 해준다.
함수형 컴포넌트에서 상태를 관리해야 되는 일이 발생한다면 useState를 사용한다.

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

2) useEffect

부수 효과(side effect)를 수행할 수 있게 해준다.
리액트 컴포넌트가 렌더링 될 때마다 특정 작업을 수행하도록 설정 할 수 있는 Hook이다.
사용자가 화면을 보지 않을 때 값을 반환하면서 cleanup 기능을 실시한다.
예를 들어, 데이터 페칭, 구독 설정, DOM 조작 등이 있다.

(1) 마운트 될 때만 실행

만약, useEffect에서 설정한 함수가 화면에 가장 처음 렌더링 될 때만 실행되고 업데이트를 실행 할 필요가 없는 경우엔 함수의 두번째 파라미터로 비어있는 배열을 넣어주면 된다.

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

(2) 특정 값이 update될 때만 실행

만약, 특정 변수가 update될 때만 useEffect를 실행하고 싶다면, useEffect 의 두번째 파라미터로 전달되는 배열 안에 검사하고 싶은 값을 넣어주면 된다.

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

3) useContext

컨텍스트(Context)를 함수형 컴포넌트에서 사용할 수 있게 해준다.
(일종의 객체인 것 같음!)

const ThemeContext = createContext('blue');
const ContextSample = () => {
  const theme = useContext(ThemeContext);
  const style = {
    width: '24px',
    height: '24px',
    background: theme
  };
  return <div style={style} />;
};

4) useReducer

복잡한 상태 로직을 처리하기 위해 리듀서를 사용할 수 있게 해준다.
useState의 대안으로 사용할 수 있다.
현재 상태와, 업데이트를 위해 필요한 정보를 담은 dispatch값을 전달 받아 새로운 상태를 반환하는 함수이다.
Reducer 함수에서 새로운 상태를 만들 때는 불변성을 지켜야 한다.

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

5) useCounter

카운터 상태를 관리하는 로직을 캡슐화하여 재사용 가능하게 만들어준다.
기본적으로 상태 값과 이를 증가시키거나 감소시키는 함수를 제공한다.

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

  const increment = () => setCount(prevCount => prevCount + 1);
  const decrement = () => setCount(prevCount => prevCount - 1);
  const reset = () => setCount(initialValue);

  return { count, increment, decrement, reset };
}

function CounterComponent() {
  const { count, increment, decrement, reset } = useCounter(0);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={increment}>Increment</button>
      <button onClick={decrement}>Decrement</button>
      <button onClick={reset}>Reset</button>
    </div>
  );
}

6) useMemo

값의 메모이제이션을 수행하여 불필요한 계산을 방지한다.

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

7) useRef

변경 가능한 reference 객체를 생성하여 DOM 엘리먼트나 컴포넌트 인스턴스에 접근할 수 있게 해준다.

const inputEl = useRef(null);

8) useCallback

useMemo와 비슷한 함수이다.
일반 값을 재사용하기 위해서는 useMemo를, 함수를 재사용 하기 위해서는 useCallback 을 사용한다.
이 Hook을 사용하면 이벤트 핸들러 함수를 필요할 때만 생성 할 수 있다.
useCallback 의 첫번째 파라미터에는 생성해주고 싶은 함수를 넣고, 두번째 파라미터에는 배열을 넣는데 이 배열에는 어떤 값이 바뀌었을 때 함수를 새로 생성해주어야 하는지 명시해야 한다.

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

useMemo와 useCallback을 활용하여 동일한 함수 만들기

useCallback(() => {
  console.log('hello world!');
}, [])

useMemo(() => {
  const fn = () => {
    console.log('hello world!');
  };
  return fn;
}, [])

9) Custom Hook

기본 훅을 조합하여 재사용 가능한 로직을 만들 수 있다.
이를 커스텀 훅이라고 한다.
커스텀 훅은 일반적으로 'use'로 시작하는 이름을 가지며, 상태 로직을 재사용할 수 있게 해준다.

function useFetch(url) {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    fetch(url)
      .then(response => response.json())
      .then(data => {
        setData(data);
        setLoading(false);
      });
  }, [url]);

  return { data, loading };
}