[React] useState()

📌 Hook?

"함수 컴포넌트에서 React state와 생명주기 기능(lifecycle features)을 연동, 연결 (hook into) 해주는 함수"

 

---

✏️ useState()

useState는 함수형 컴포넌트에서 상탯값을 관리하게 해준다.

기본 구조:

const [state, setState] = useState(initialState);

initialState를 파라미터로 받고, state와 state를 변경할 setState함수를 반환한다.

초기값을 매개변수로 useState를 호출하면 첫 번째, 두 번째 요소에 각각 state와 setState를 받을 수 있다.

**배열 비구조화 문법을 이용해 받는 것이기 때문에, state와 setState의 이름은 임의로 정할 수 있음.

 

사용예시:

import { useState } from 'react';

const Example = () => {
  const [count, setCount] = useState(0);
  
  return (
    <div>
      <p>{`count: ${count}`}</p>
      <button onClick={() => setCount(count + 1)}>+</button>
    </div>
  )
};

export default Example;

useState가 반환하는 첫 번째 인자인 state와 두번째 인자인 setState -> count와 setCount를 받아서 사용