React JS - state 사용법

 

React JS state

---

 

create-react-app 으로 react 프로젝트를 생성했다면

 

App.js  에서 개발이 가능하다.

 

React는 변수를 사용 할 때 state라는 것을 사용한다. 

 

자바스크립트에서는 변수를 html 안에 바인딩 할 때, innerHtml 로 넣어주고 다시 가져오려면 elementbyId 로 가져와서 변환하는 

 

손이 많이 가는 작업을 해줘야 하지만 state는 간단하게 바인딩 가능하다.

 

import { useState } from "react";   //state를 사용 할 수 있도록 import

function App() {
  const [toDo, setToDo] = useState("");
  const onChange = (event) => setToDo(event.target.value);
  console.log(toDo);
  return (
  //JSX
    <div>
      <input onChange={onChange} value={toDo} type="text"></input>
    </div>
  );
}
export default App;

 

먼저 state를 사용 할 수 있도록 useState를 import 해준다.

 

state는 배열로 이루어져 있는데

 

첫번째 인자는 변수

 

두번째 인자는 변수를 변경하게 해주는 함수이다.

 

const [word, setWord] = useState("");

 

여기서 뒤에 useState()는 초기값을 설정 한다. 

 

word를 변경하고 싶으면 setWord("changeword") 이렇게 setWord 함수를 이용해야 한다.

 

이렇게 생성된 state 는 JSX 안에서 중괄호 안에 넣어주면 바로 바인딩 된다.

 

그리고 state가 변경되면 해당 컴포넌트가 재 랜더링 된다.