클래스를 작성하지 않고도 state와 다른 React기능을 작성하게 해주는 기능

State Hook

버튼을 클릭하면 값이 증가하는 간단한 카운터 예시가 여기 있다.

import React, { useState } from 'react';

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

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

useState 의 인자는 초기값을 나타낸다.

• state와 state를 갱신할 함수를 하나 제공 받는다.
• 초기값은 첫번째 렌더링에만 한번 사용된다.
• setState와 달리 객체일 필요가 없다.

여러 state 변수 사용하기

하나의 컴포넌트에 여러 state를 사용할 수 있다.

이 state들은 순서대로 실행한다.

function ExampleWithManyStates() {
  // 상태 변수를 여러 개 선언했습니다!
  const [age, setAge] = useState(42);
  const [fruit, setFruit] = useState('banana');
  const [todos, setTodos] = useState([{ text: 'Learn Hooks' }]);
  // ...
}

Hook이란? Hook은 함수형 컴포넌트에서 React state와 생명주기 기능을 연동할 수 있게 해주는 함수이다.

Effect Hook

데이터를 가져오거나 구독하고, DOM을 직접 조작하는 작업에 사용한다. (side effect있는것들)

예를 들어, React가 DOM을 업데이트한 뒤 문서의 title를 바꾸는 컴포넌트를 구현한다면 다음과 같이 표시될 수 있다.

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

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

  // componentDidMount, componentDidUpdate와 비슷합니다
  useEffect(() => {
    // 브라우저 API를 이용해 문서의 타이틀을 업데이트합니다
    document.title = `You clicked ${count} times`;
  });

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