React - State로 상태 관리

 

리 렌더(Re-Render), 리 렌더링(Re-Rendering)

→ 컴포넌트의 상태 변화가 바뀐걸 감지해서 자동으로 이 컴포넌트를 다시 렌더링해서 UI를 변경해주는 상황

 

 

컴포넌트의 상태를 의미하고 변화할 수 있는 값인 State를 만들 수 있으며, 아래와 같이 하나의 컴포넌트에 여러개의 상태를 생성하고 관리할 수 있다.

 

useState

→ React가 제공하는 내장 함수를 사용하기 위해 import를 해야한다.

→ Return

0	상태값
1	상태변화함수

const state = useState(0);

 

→ 비구조화 할당 문법을 이용해서 반환을 받는 것이 일반적이다.

const [state, setState] = useState(0);

 

 

실습

App.jsx

import "./App.css";
import { useState } from "react";

function App() {
  const [count, setCount] = useState(0);
  const [light, setLight] = useState("OFF");
  console.log(count);
  console.log(light);
  return (
    <>
      <div>
        <h1>{light}</h1>
        <button
          onClick={() => {
            setLight(light === "ON" ? "OFF" : "ON");
          }}
        >
          {light === "ON" ? "끄기" : "켜기"}
        </button>
      </div>
      <div>
        <h1>{count}</h1>
        <button
          onClick={() => {
            setCount(count + 1);
          }}
        >
          +
        </button>
      </div>
    </>
  );
}

export default App;

설명

useState를 이용해 하나는 count, 하나는 light를 위한 상태와 상태변화함수를 각각 비구조화 할당 문법을 이용해 반환 받고 버튼의 클릭 이벤트를 통해서 각각의 상태를 변화한다. 이 때 상태가 변화하게 되면 App 컴포넌트는 리렌더링이 되어서 아래와 같이 console.log가 계속 찍힌다. 이것은 상태가 변화하면 UI를 다시 렌더링해 준다는 증거가 된다.

 

 

 

 

 

인프런 이정환 강사님 강의를 참고해서 정리했습니다.

한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지 강의 | 이정환 Winterlood - 인프런