useState는 뭔가요?

1. 간단한 소개

 

useState Hook을 사용하면 함수 구성 요소의 상태를 추적할 수 있다.

 

내가 주로 사용했을 때는 값을 변경시키고 그걸 반영해야할 때 자주 사용했다.

ex) 버튼을 누르면 true 혹은 false로 바뀌어야 할 때, 버튼을 누르면 1씩 증가

 

2. 사용법

 

우선 이 Hook을 사용하려면 import 해와야 한다.

import { useState } from 'react';

export default function App() {

}

import 해왔다면

import { useState } from 'react';

export default function App() {
  const [count, setCount] = useState(0)

}

const [변수명, count를 갱신할 수 있는 함수] = useState(초기값) 이렇게 작성해주면 사용할 준비가 끝난다.

보통 변수명, set변수명 명명해 사용한다.

초기값은 숫자, boolean, 객체, 배열 등 다양하게 설정할 수 있다.

 

import { useState } from 'react';

export default function App() {
  const [count, setCount] = useState(0);
  return (
    <section>
      <h1>현재 카운트는 {count} 입니다.</h1>
      <button type="button" onClick={() => setCount(count + 1)}>
        증가
      </button>
      <button type="button" onClick={() => setCount(count - 1)}>
        감소
      </button>
      <button type="button" onClick={() => setCount(0)}>
        초기화
      </button>
    </section>
  );
}

count 값을 가져와 화면에 보이게 할 수도 있고 버튼을 눌렀을 때 증가, 감소, 초기화가 되게 할 수 있다.

 

3. 주의사항

useState는 비동기 Hook이다.

즉시 상태를 변경하지 않고 구성 요소가 다시 렌더링 될 때까지 기다려야 한다.

 

즉시 상태를 변경하지 않아 예상치 못한 동작을 할 수가 있으니 주의해서 사용해야 한다.

 

해당 문제를 useRef를 사용해 해결하는 경우를 봤는데, 아직까지는 문제가 된 적 없어서 문제가 된다면 포스팅 해야겠다.

찾다보니까 useState를 useReducer로 리펙토링 하기도 하던데 이것도 나중에 리펙토링 하면서 정리해봐야겠다.

 

참고

https://javascript.plainenglish.io/why-you-shouldnt-always-use-usestate-658994693018

https://www.w3schools.com/react/react_usestate.asp

https://ko.reactjs.org/docs/hooks-state.html