[React] state, UseState 알아보기

안녕하세요. 이번 글에는 리액트에서 사용률이 100%로 매우 중요한 개념임
state에 대해 알아보겠습니다.

State란?

컴포넌트 안에서 데이터를 보관하는 박스같은 역할을 합니다. UseState라고 불리는 문법을 이용하고,
보통 컴포넌트 내부에서 유동적으로 바뀔 수 있는 값을 state라고 부르며 개발 상황에 맞춰 이 값을 변경하여 저장해놓고 필요할때 꺼내와서 쓰는 개념이라고 보시면 됩니다.

UseState를 이용하여 State값 관리해보기

//useState 훅 임포트 해줘야합니다
import { useState } from "react";

function App() {
//value라는 변수에 state값 담고, 기본값은 공백으로 설정하기
//setValue로 value 상태값을 컨트롤 하는 겁니다
  const [value, setValue] = useState("");
  return (
    <div>
      <input
        onChange={(e) => {
          //입력할때마다 state값 담기
          setValue(e.target.value);
        }}
        placeholder="담고 싶은 값 입력해보기"
      />
      
  		//담은 state값 출력하기
      <div>{value}</div>
    </div>
  );
}

이런식으로 요소안에 특정 이벤트를 주고 그 이벤트를 행하면 state값에 변경을 주는 것입니다.

참고자료

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