[React] state와 re-rendering

이번 글은 리액트에서 state를 활용하는 법에 대한 글이다.

 

---

 

[ state란? ]

state는 현재 가지고 있는 형태나 모양을 정의한 값으로 변화할 수 있는 동적인 값이다.

컴포넌트의 현재 상태를 보관하는 변수이다.

그래서 state의 값에 따라 렌더링되는 UI가 결정된다.

 

---

 

[ State 사용법 ]

state 사용을 위해선 useState를 꼭 임포트 후 사용할 수 있다.

import { useState } from "react";

 

 

---

 

 

[ State 구조 ]

useState()는 새로운 state를 생성하는 함수고, 인수로는 state의 초기값을 받는다.

state는 2개의 요소를 담은 배열을 반환한다.

state의 현재 값과 state를 변경시키는 상태변화함수를 반환한다.

 

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

function App() {
  const state = useState();
  console.log(state);
  
  return (
    <>
    </>
  );
}

export default App;

=> 아래 코드는 useState()의 인수가 비어있으므로 결과값으로 undefined(현재 값)과 이 값을 변화시키는 상태변화함수가 반환되는 것을 확인할 수 있다.

결과값

 

 

 

따라서 아래 코드와 같이 반환하는 배열의 값을 구조분해할당하여 받을 수 있음

• state : useState(0)를 통해 생성한 값
• setState : state의 값을 변경시키는 함수

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

 

 

---

 

[ 예제1 - 카운터 ]

이때 state를 변경해주려면 아래 코드처럼 상태변경 함수를 통해 변경해줘야한다.

상태변경함수의 인수로 state를 변화할 내용을 담아준다.

function App() {
  const [count, setCount] = useState(0);

  return (
    <>
    <h1>{count}</h1>
      <button
        onClick={() => {
          setCount(count + 1);
        }}
      >
        +
      </button>
    </div>
      
    </>
  );
}

=> 클릭 시 상태변화함수인 setCount를 통해 count의 값을 변경한다.

결과값

 

 

---

 

 

[ 예제2 - 스위치 ]

아래 코드는 state의 값과 조건문의 true, false 여부에 따라 On/Off가 변경된다.

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

function App() {
  const [light, setLight] = useState("Off");

  return (
    <>
    <div>
      <h1>{light}</h1>
      <button onClick={()=>{setLight(light === "On" ? "Off":"On");}}>Switch</button>
    </div>
    </>
  );
}

export default App;

---

 

[ 리렌더링(re-rendering) ]

re-render는 state 값의 변경으로 인해 컴포넌트가 다시 렌더링되는 것이다.

=> 렌더링은 state 변경시에만 다시 렌더된다. (= 렌더가 필요한 경우 state를 활용할 수 있다.)

 

---