[React.js] State - 상태 관리

State란

현재 가지고 있는 형태나 모양을 정의 변화할 수 있는 동적인 값

리액트의 컴포넌트 들은 상태를 정의 할 수 있느 state를 가질 수 있다.

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

리액트가 state의 상태 변화에 따라 렌더링되는 결과를 바꿀수 있다.

리액트에서 다시 렌더링 되는 것을

리 렌더(Re-Render), 리 렌더링(Re-Rendering) 이라고 한다.

리액트에서는 하나의 컴포넌트에 여러개의 state를 가질 수 있다.

 

import "./App.css";

import { useState } from "react";

function App() {

  const state = useState();

  console.log(state);

  return <></>;

}

export default App;

state를 사용하기 위해서는 useState를 import해야한다.

state를 콘솔에 찍었을때

이렇게 나타난다

첫번째 요소에는 새롭게 생성된 state의 값이다.

function App() {

  const state = useState(0);

  console.log(state);

  return <></>;

}

useState의 인수로 초기 값을 0으로 세팅하게 되면

배열에 0이 들어오게 된다.

두번 째에 들어가는 값은 함수인데 첫번째 state의 상태를 변화시키는 함수가 들어있다.

이함수를 상태 변화 함수라 부른다.

 

state를 변수에 담아 사용하지않고

배열로 받아 비구조화 할당 문법을 이용해서 사용을 한다.

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

state에는 값이 들어오게 되고 setState에는 값을 변화 시키는 함수가 들어오게 된다.

 

App.jsx

import "./App.css";

import { useState } from "react";

function App() {

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

  return (

    <>

      <h1>{state}</h1>

    </>

  );

}

export default App;

결과

import "./App.css";

import { useState } from "react";

function App() {

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

  return (

    <>

      <h1>{state}</h1>

      <button

        onClick={() => {

          setState(state + 1);

        }}

      >

        +

      </button>

    </>

  );

}

export default App;

버튼을 클릭할때마다 state의 값을 증가시키는 코드이다

function App() {

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

  const [light, setLight] = useState("OFF");

  return (

    <>

      <div>

        <h1>{light}</h1>

        <button

          onClick={() => {

            setLight(light === "ON" ? "OFF" : "ON");

          }}

        >

          전구 끄기/켜기

        </button>

      </div>

해당 코드는 삼항연산자를 사용하여 버튼을 클릭했을때 ON또는 OFF로 변화하는 코드이다

function App() {

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

  const [light, setLight] = useState("OFF");

  return (

    <>

      <div>

        <h1>{light}</h1>

        <button

          onClick={() => {

            setLight(light === "ON" ? "OFF" : "ON");

          }}

        >

          {light === "ON" ? "끄기" : "켜기"}

        </button>

버튼 텍스트도 삼항연산자를 사용하여 '켜기','끄기'로 바꿀 수도 있다.