[React] State, setState

State

 

- 현재 가지고 있는 형태나 모양을 정의

- 컴포넌트의 상태를 의미

- 변화할 수 있는 동적인 값

- 상태변화를 감지해 자동으로 리렌더링을 함

- 하나의 컴포넌트에 여러개의 state를 생성할 수 있음

 

 

 

- 두 가지 요소가 전달되는 것을 확인할 수 있음

 

 

 

- 첫번째 요소 : 새롭게 생성된 state의 값(초기값). 인수로 전달받음

- 두번째 요소 : 상태 변화 함수(state를 변경시키는 함수)

 

 

 

 

- 그렇기 때문에 대부분의 경우 구조분해할당으로 받음

 

 

 

state 변경

 

 

 

- setState를 활용함

 

 

 

Count로 수 늘려보기

 

- +버튼을 클릭할 때마다 변경 사항을 감지해 리렌더링해줌

 

 

 

전구 키고 끄기

 

 

- 삼항 연산자를 사용하여 보기 좋게 만들 수 있음

 

 

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

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>
    </div>
    <div>
      <h1>{count}</h1>
      <button 
      onClick={() => {
        setCount(count+1)
      }}>+</button>
    </div>
    </>
  )
}

export default App

 

 

setState를 쓰는 이유

 

- 단순히 let, const로 변수를 선언해서 설정하면 리렌더링이 일어나지 않음!

- 변화하는 가변적인 값을 관리할 때에는 state를 사용해야 함