React Hook

Hook은 React 16.8에 새로 추가된 기능이다.

Hook은 함수 컴포넌트에서 state와 생명주기 기능을
class 없이 사용할 수 있게 한다.

useState

import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);
  const handleClick = () => setCount(count + 1);
  
  return (
    <div>
      <p>{count}</p>
      <button onClick={handleClick}>Click</button>
    </div>
  );
}

useState는 인자를 하나 받는데 이는 초기 state값이다.
숫자, 문자열, 배열, 객체 등 다양한 값을 넣을 수 있다.
그리고 초기값은 최초 렌더링될 때 딱 한번 사용된다.
하나의 컴포넌트 내에서 여러 개 사용할 수 있다.

function App() {
  const [fruit, setFruit] = useState('Strawberry');
  const [language, setLanguage] = useState('Korean');
  const [season, setSeason] = useState('Winter');
}

useEffect