[React] useState hook에 대해서 알아보자

 

1. useState 란?

리액트 16.8 이전 버전에는 함수형 컴포넌트에서 상태를 관리할 수 없었는데, 리액트 16.8 에서 Hooks 라는 기능을 도입하고 함수형 컴포넌트에서 상태를 관리할 수 있게 됐다. 상태관리를 하는 Hook 중에 가장 기본이 되는 것 중에 하나가 useState이다. 

 

2. useState의 사용법

1. 상단에 useState 함수를 import 한다.
import { useState } from 'react';

2. 배열 구조분해를 사용하여 [something, setSomething] 과 같은 state 변수의 이름을 지정한다.
const [state, setState] = useState(1);

3. state는 상태값이고, setState 함수는 상태값을 바꿔준다.

 

3. useState 간단한 사용 예제

import { useState } from 'react';

function App(){
  const [isKorea, setIsKorea] = useState(true);
  
  const location = {
    country: isKorea ? '한국' : '일본'
  };
  
  return (
    <header className="App-header">
      <h2>내가 있는 나라</h2>
      <p>나라: {location.country}</p>
      <button onClick={() => setIsKorea(!isKorea)}>Update</button>
    </header>
  ) 
}

export default App;

 

결론 및 요약

button을 클릭하면 나라가 한국 일본으로 바뀌는 것을 볼 수 있다.

바뀌는 이유는 상태가 변화 할 때마다 리렌더링을 해주기 때문이다.

 

- useState 는 상태를 관리하는 함수

- useState를 이용하여 상태를 변화시킬 수 있다.

- 상태가 변화하면 리렌더링을 해준다. (그래서 버튼 클릭시 한국과 일본이 바뀐다.)