[REACT] State로 상태관리 하기

State로 상태관리 하기

import './App.css'
import { useState } from "react"; //상태관리를 위해서 선언해줘야 한다.

function App() {
  const [state, setState] = useState(0); //구조 분해 할당방법, 일반적인 방법
  console.log(state);

  return<></>;
}

export default App;

const [state, setState] 에서 state 는 값, setState는 state 값을 변경시키는 함수가 자리할 위치이다.

State 변경해보기

1.버튼 만들어서 State 값 증가시켜보기

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;

해당 방식은 리렌더링 방식이라고 부른다.

2.버튼 만들어서 State 값 증가시켜보기

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

function App() {
  const [count, setState] = useState(0);
  const [light, setLight] = useState("OFF");

  return (    
     <>
    <div>
      <h1>{light}</h1>
        <button onClick={() =>{
        setLight(light === "OFF"?"ON":"OFF")
        }}
      >{light === "OFF"?"켜기":"끄기"}</button>
    </div>

    <div>
      <h1>{count}</h1>
      <button onClick={() =>{
        setState(count+1)
        }}
      >
        +
      </button>
    </div>
    </>

    );
  }


export default App;

궁금증1

굳이 useState를 사용해야지만 화면에 랜더링이 될까? ex() const [count, setState] = useState(0);

let light = "OFF"; light === "OFF"?"켜기":"끄기" 이렇게 선언하고 사용한다면??

답은 NO!

React 컴포넌트에서 가변값들을 화면에 렌더링 해주고 싶다면 무조건 useState 를 사용해야지만 된다.