컴포넌트 (3) - State

- 개요

State는 컴포넌트 내부에서 사용하는 변수로서 useState 함수를 호출하여 생성한다

컴포넌트의 안에서 useState 함수를 호출하면 하나의 State와 그에 대한 Setter 함수가 생성된다

React의 렌더링 사이클에서 State의 값은 보존된다

이때 State 값이 변하게 되면 해당 컴포넌트는 다시 렌더링된다

 

- State의 구성

import { useState } from "react";

function App() {
  const [value, setValue] = useState(0);
  return <div>{value}</div>;
}

 

State를 생성하기 위해서는 useState 함수를 호출해야 하는데,

해당 예약어는 react 라이브러리에 포함되어 있으므로 import 문을 호출하여 포함해야 한다

"useState(기본값)"의 형태로 호출하여 State와 State에 대한 Setter 함수가 생성된다

 

- 예제

export default function App() {
  let value = 0;

  return (
    <div>
      <h1>value: {value}</h1>
      <button>Increase value</button>
      <button>Reset value</button>
    </div>
  );
}

 

위와 같이 구성되어 있는 JSX 코드에 대해 다음의 작업을 수행한다

• 1) value를 state로 만들기
• 2) value의 값을 증가시키는 Increase 버튼 구성
• 3) value의 값을 0으로 초기화하는 Reset 버튼 구성

 

import { useState } from "react";

export default function App() {
  const [value, setValue] = useState(0);

  return (
    <div>
      <h1>value: {value}</h1>
      <button
        onClick={() => {
          setValue(value + 1);
        }}
      >
        Increase value
      </button>
      <button
        onClick={() => {
          setValue(0);
        }}
      >
        Reset value
      </button>
    </div>
  );
}

 

최종적으로 코드를 위와 같이 구성한다

react 라이브러리를 포함하여 State를 생성하기 위한 useState 함수를 포함시킨다

2개의 버튼에 대해 onClick 이벤트 리스너를 설정한다

• Increas Value 버튼 : setValue(value + 1)의 형태로 구성하여 State의 값을 1 증가
• Reset Value 버튼 : setValue(0)의 형태로 구성하여 State의 값을 0으로 초기화
• *** setValue 함수들은 즉시 적용되지 않고, 함수가 포함된 구문이 종료되면 적용됨 ***

 

- 최종 실행 결과