State와 Props / 전원 버튼, Counter 기능

📌 State로 상태 관리하기 

 

state

: 컴포넌트의 상태를 의미하는 값

 

 

state 값이 바뀌면, react는 컴포넌트의 상태 변화를 감지해서 자동으로 컴포넌트를 리렌더링

👉 컴포넌트 값이 바뀌었을 때의 UI를 보여줌

 

* 리 렌더(Re-Render) / 리 렌더링(Re-Rendering) : 다시 렌더링 하는 것 (업데이트)

 

 

 

state는 한 컴포넌트 안에 여러 개 만들 수 있다.

 

 

 

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

• 1번째 요소: 새로 생성된 state의 값
• 2번째 요소: 상태 변화 함수 (state 값을 변경하는 함수)

 

 

 

---

 

 

🔺함수 컴포넌트에서 state 생성하기

 

1. import로 내장 함수인 useState 불러오기

import { useState } from 'react'

 

 

 

2. 함수 컴포넌트 내에서 선언하기

const [state명, 상태 변화 함수명] = useState(state 초기값);

• 상태 변화 함수는 setXXX으로 작명한다.

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

 

 

 

3. return문 안에서 호출하기

{ state명 }

function App() {

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

  return (
    <>
    <h1>{state}</h1>
    </>
  )
}

 

 

 

 

 

🔺state 값 변경하기

상태변화함수(수정할 state 값);

setState(state + 1)

setState("on")

 

 

 

 

 

🔺State를 Props로 전달하기

• 부모 컴포넌트로부터 현재 state값을 props로 받아옴

import { useState } from 'react'

const Bulb = ({light}) => { // 구조분해할당으로 {light}값 가져옴
  return (
      <div>{light === "on" ? 
          <h1 style={{backgroundColor: "orange"}}>on</h1> 
          : 
          <h1 style={{backgroundColor: "grey"}}>off</h1>}
      </div>
   )
}

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

  return (
    <>
      <Bulb light={light}/> // props로 {light}값 전달
      <button 
      onClick={()=> {
        setLight(light === "on" ? "off" : "on")
      }}>{light === "on" ? "전원 끄기" : "전원 켜기"}
      </button>
    </>
  )
}

 

 

 

 

 

✨ 리 렌더링(Re-Rendering)이 발생하는 상황

1. 자신의 state값이 변경되면
2. 부모에게 제공받은 props값이 변경되면
3. 부모 컴포넌트가 리렌더링되면
   
   

 

---

 

 

📌 버튼을 누르면 값이 올라가는 Counter 기능

• 버튼을 누를 때마다 state 값을 현재값 + 1로 바꿔줌

 

 

📌 on / off 전원 버튼

• "전원 켜기"를 누르면 state값은 on, 버튼 글자는 "전원 끄기"를 보여줌
• "전원 끄기"를 누르면 state값은 off, 버튼 글자는 "전원 켜기"를 보여줌

 

 

 

 

---

 

 

출처

한입 크기로 잘라먹는 리액트