State(useState)

State

---

리액트에서는 화면에 표시하는 데이터나 길이가 변하는 상태 등을 모두 State로 관리합니다.

웹 애플리케이션을 만들 때 화면은 다양한 상태를 가집니다. 예시는 다음과 같습니다.

• 에러가 있는가?
• 모달 창을 열고 있는가?
• 버튼을 클릭했는가?
• 텍스트 박스에 무언가를 입력했는가?

이와 같이 '상태'는 모두 State로 관리하며 이벤트가 실행되는 경우 등에 업데이트 처리를 수행함으로써 동적 애플리케이션을 구현합니다.

 

useState

---

useState는 리액트 안에서 제공되므로 사용할 때는 import해야 합니다.

 

import { useState } from "react";

useState 함수 반환값은 배열형태로 되어 있습니다. 첫번째에 State 변수, 두번째에 State를 업데이트하기 위한 함수가 설정됩니다.

 

  // State 정의

  const [변수명, set변수명] = useState(초기값);

버튼 클릭시 카운트업하는 기능을 구현해보겠습니다.

 

import { ColoredMessage } from "./components/ColoredMessage";

import { useState } from "react";

export const App = () => {

  // State 정의

  const [num, setNum] = useState(0);

 

  // 버튼 클릭 시 state를 카운트 업

  const onClickButton = () => {

    setNum(num + 1);

  };

 

 

  return (

    <>

      <h1 style={{ color: "red" }}>안녕하세요</h1>

      <ColoredMessage color="blue" message="잘 지내시죠?" />

      <ColoredMessage color="pink" message="잘 지냅니다!" />

      <button onClick={onClickButton}>버튼</button>

      {/* 아래에 카운트 변수 추가 */}

      <p>{num}</p>

    </>

  );

};

export default App;