[React] React Hook과 State(useState)

State는 컴포넌트가 갖고 있는 속성 값으로서 리액트에서 이벤트에 의해 변경되는 동적인 값이다.

const StateStudy = function () {

  let name = "Mike";

  function changeName() {
    name = name === "Mike" ? "Jane" : "Mike";
    console.log(name);
  }

  return (
    <div>
      <h1>State Test</h1>
      <h2>{name}</h2>
      <button onClick={changeName}>Change</button>
    </div>
  );
};

export default StateStudy;

 

 

StateStudy 컴포넌트를 생성해주고 버튼 태그에 name을 확인해서 Mike일 때 Jane으로 변경해주고 Jane일 때는 Mike로 변경해주는 changeName 함수를 추가했다. 하지만 버튼을 눌렀을 때 콘솔에서는 이름이 업데이트 됐지만 dom이 업데이트 되지 않았기 때문에 바뀐 이름이 화면에 출력되지 않았음을 확인할 수 있었다. (+name 변수는 해당 컴포넌트가 관리하고 있는 상태 값이 아니라 단순 변수일 뿐이다. 그래서 name 값이 바뀌어도 리액트는 값의 변화를 인지하지 못한다.) dom을 업데이트 해주기 위해서 h2 태그에 id값을 name으로 설정해주고 자바스크립트 코드 (document.getElementById("name").innerText = name)을 추가해주는 방법도 있지만 한 번 state를 사용하여 자동으로 UI를 업데이트 시켜주려고 한다. 

 

 

React Hook?

초기 리액트는 state와 lifecycle을 관리하려면 클래스형 컴포넌트를 만들어야 했고 단순히 UI만 표현해주는 컴포넌트만 함수형으로 제작했다. 하지만 React 버전 16.8버전부터 React Hook이 새롭게 추가됨에 따라 모든 컴포넌트를 함수형으로 제작할 수 있게 되었고 리액트 훅을 이용해서 함수형 컴포넌트에서도 state와 lifecycle 관리가 가능해졌다. 

 

React Hook - useState(상태 값 관리)

// userState import
import { useState } from "react";

const StateStudy = function () {

  const [name, setName] = useState("Mike");
  
  function changeName() {
    const newName = name === "Mike" ? "Jane" : "Mike";
    setName(newName);
  }

  return (
    <div>
      <h1>State Test</h1>
      <h2 id="name">{name}</h2>
      <button onClick={changeName}>Change</button>
    </div>
  );
};

export default StateStudy;

 

useState를 사용해서 변경된 name 값을 출력해보자. 

useState는 배열을 반환하며 배열의 첫 번째 값은 state(name), 두 번째 값은 state를 변경해주는 함수(setName)다.

setName함수를 호출해서 name이 바뀌면 리액트는 해당 컴포넌트를 다시 렌더링한다. useState()안에는 초기 값(Mike)을 설정해준다. 

 

import "./App.css";
import StateStudy from "./component/StateStudy";

function App() {
  return (
    <div className="App">
      <StateStudy />
      <StateStudy />
      <StateStudy />
    </div>
  );
}

 

App.js에서 StateStudy 컴포넌트를 3번 추가해주었다.

 

 

동일한 컴포넌트지만 다른 state에 영향을 미치지 않고 각각의 state는 따로 관리된다는 것을 확인할 수 있다.