8장. Hooks

[Dogdriip]

8장. Hooks

• 리액트 v16.8에 새로 도입
• 기존의 함수형 컴포넌트에서 할 수 없었던 다양한 작업을 할 수 있게 해 줌

8.1 useState

• 함수형 컴포넌트에서도 state를 지니고 관리할 수 있게 해 줌

  const [value, setValue] = useState(0);

8.2 useEffect

• 컴포넌트가 렌더링될 때마다 특정 작업을 수행하도록 설정할 수 있게 해 줌
  • componentDidMount와 componentDidUpdate를 합친 형태
• 컴포넌트가 맨 처음 렌더링될 때만 실행하고, 업데이트될 때는 실행하지 않도록 하고 싶을 때:

  useEffect(() => {
  console.log('마운트될 때만 실행됩니다.');
  }, []);

• 특정 값이 변경될 때만 호출하고 싶을 때:

  useEffect(() => {
  console.log(name);
  }, [name]);

  두 번째 인자인 배열은 dependency array (deps)라고 부른다.

• 컴포넌트가 언마운트되기 전이나 업데이트되기 직전에 어떠한 작업을 수행하고 싶을 때:

  useEffect(() => {
  console.log('effect');
  console.log(name);
  
  return () => {
    console.log('cleanup');
    console.log(name);
  }
  }, [name]);

  위의 경우, 렌더링될 때마다 뒷정리 함수가 업데이트 직전의 값으로 계속 호출된다. 오직 언마운트될 때만 뒷정리 함수를 호출하고 싶다면 deps 배열을 빈 배열로 넣으면 된다.

8.3 useReducer

• useState보다 더 다양한 컴포넌트 상황에 따라 다양한 상태를 다른 값으로 업데이트해주고 싶을 때 사용
• 컴포넌트 업데이트 로직을 컴포넌트 바깥으로 빼낼 수 있다.

• 카운터 예제:

  import React, { useReducer } from "react";
  
  type State = {
  value: number;
  };
  
  type Action = {
  type: "INCREMENT" | "DECREMENT";
  };
  
  const reducer = (state: State, action: Action) => {
  switch (action.type) {
    case "INCREMENT":
      return { value: state.value + 1 };
    case "DECREMENT":
      return { value: state.value - 1 };
    default:
      return state;
  }
  };
  
  const Counter = () => {
  const [state, dispatch] = useReducer(reducer, { value: 0 } as State);
  
  return (
    <div>
      <p>
        현재 카운터 값은 <b>{state.value}</b>입니다.
      </p>
      <button onClick={() => dispatch({ type: "INCREMENT" })}>+1</button>
      <button onClick={() => dispatch({ type: "DECREMENT" })}>-1</button>
    </div>
  );
  };
  
  export default Counter;

• 리듀서: 현재 state와 업데이트를 위해 필요한 정보인 action값을 전달받아 새로운 상태를 반환하는 함수

8.4 useMemo

• 컴포넌트 내부에서 발생하는 연산을 최적화
• 렌더링하는 과정에서 특정 값이 바뀌었을 때만 연산을 수행하고, 원하는 값이 바뀌지 않았다면 이전에 연산했던 결과를 다시 사용

  const avg = useMemo(() => getAverage(list), [list]);

  컴포넌트가 리렌더링되더라도 list값이 바뀔 때만 getAverage 함수가 호출된다.

8.5 useCallback

• 이전에 만들어놨던 함수를 재사용
  • 컴포넌트가 리렌더링될때마다 컴포넌트 내부에 선언한 함수들이 새로 선언되는 것을 방지
  • 렌더링이 자주 발생하거나 렌더링해야 할 컴포넌트의 개수가 많아지면 이 부분을 최적화하는 것이 좋음

• useMemo와 상당히 비슷

  const onChange = useCallback((e) => {
  setNumber(e.target.value);
  }, []);  // 컴포넌트가 처음 렌더링될 때만 함수 생성

  deps에는 어떤 값이 바뀌었을 때 함수를 새로 생성해야 하는지 명시해야 한다. 위와 같은 경우 컴포넌트가 최초 렌더링될 때 만들었던 함수를 계속해서 재사용하게 된다.

  함수 내부에서 state값에 의존해야 할 때는 그 값을 반드시 deps에 포함시켜 주어야 한다.

8.6 useRef

• 함수형 컴포넌트에서 ref를 사용할 수 있게 해 줌

  
  const inputEl = useRef(null);
  ...
  return (
  <input ref={inputEl} />
  );

8.9 정리

• 리액트 매뉴얼에 따르면, 기존의 클래스형 컴포넌트는 앞으로도 계속해서 지원될 예정
• 다만, 매뉴얼에서는 새로 작성하는 컴포넌트의 경우 함수형 컴포넌트와 Hooks를 사용할 것을 권장하고 있음