[React] 함수형 컴포넌트에서 상태를 변화시키기: useState()

useState()

클래스형 컴포넌트에서는 this.state로 상태를 관리합니다. 함수형 컴포넌트에서는 Hook이 도입되면서 useState()로 상태를 관리할 수 있게 되었습니다. useState()의 특징은 다음과 같습니다.

 

• useState(state)는 초기의 state값을 받아서 초기화해야합니다. 이 값은 처음 렌더링이 될 때 사용됩니다.
• 함수형 컴포넌트의 최상위에서 실행되어야 하며 반복문, 조건문, 중첩된 함수 내에서는 실행하면 안됩니다.
• 클래스형 컴포넌트의 this.state 기능과 똑같으며, 함수가 끝나도 상태가 남아있습니다.

---

useState() 사용 방법

App.js에 다음 내용을 추가합니다.

import React, { useState } from "react";

function App() {
  const [count, setCount] = useState(0);
  const clicked = () => {
    setCount(count + 1);
  };

  return (
    <>
      <h1>{count}</h1>
      <button onClick={clicked}>Click</button>
    </>
  );
}

useState()의 초기값으로 0이 전달되었기 때문에 이 상태로 제일 먼저 렌더링합니다. 버튼을 클릭하면 clicked()가 실행되며 clicked 내부의 setCount()가 실행됩니다. count에 1을 더한 값으로 count의 상태를 갱신합니다. 이후 컴포넌트가 다시 렌더링됩니다.