React Hook

개요

• 계층 변화 없이 상태 관련 로직을 재사용할 수 있도록 도와줌
• 로직에 기반을둔 작은 함수로 컴포넌트를 나눌 수 있음

State Hook

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

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

Effect Hook

React Class의 componentDidMount, componentDidUpdate, componentWillUnmount와 같은 목적으로 useEffect를 제공한다.

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

  useEffect(() => {
    setTitle(`You Clicked ${count} times`)
  });

  function onClickButton() {
    setCount(count + 1)
  }

  return (
    <div>
      <p>{title}</p>
      <button onClick={onClickButton}>
        Click me
      </button>
    </div>
  )
}

Hook 사용 규칙

• 최상위에서만 Hook을 호출해야 합니다.
  • 반복문, 조건문, 중첩된 함수 내에서 Hook을 실행하면 안된다.
• React 함수 컴포넌트 내에서만 Hook을 호출해야 한다.
  • 일반 JavaScript 함수에서는 Hook을 호출해서는 안된다.