[리액트 React] 스테이트 (State)

State

• 리액트 컴포넌트의 내부에서 관리되는 상태 데이터
• 컴포넌트의 상태(state)가 변경되면 컴포넌트는 다시 렌더링 되며 업데이트된 상태를 반영한다( 동작 및  UI 변경 )
• State를 만들 때는 useState()를 사용한다.

---

useState

• 함수형 컴포넌트에서 상태를 관리하기 위한 Hook으로 배열 비구조화를 통해 (= 객체 구조분해할당) 상태값과 상태를 갱신하는 함수를 반환한다

Child와 useState 예시 코드

// 부모 컴포넌트
import React, { useState } from "react";
function App() {
  return <GrandFather />;
}

// 자식1 컴포넌트
function GrandFather() {
  const [name, setName] = useState("김할아");
  return <Mother grandFatherName={name} setName={setName} />;
}

// 자식2 컴포넌트
function Mother(props) {
  return (
    <Child grandFatherName={props.grandFatherName} setName={props.setName} />
  );
}

// 자식3 컴포넌트
function Child(props) {
  return (
    <div>
      <button
        onClick={() => {
          props.setName("박할아");
        }}
      >
        할아버지 이름 바꾸기
      </button>
      <div>{props.grandFatherName}</div>
    </div>
  );
}

export default App;

 

1. App컴포넌트(최상위 컴포넌트)에서 GrandFather 컴포넌트를 호출한다
2. GrandFather 컴포넌트에서 useState를 통해 name 상태를 만들고 Mother 컴포넌트에 name과 setName을 props로 전달한다
3. Mother컴포넌트에서 GrandFather에서 받은 props를 Child컴포넌트로 다시 전달한다
4. Child 컴포넌트에서 button을 클릭해 setName 함수로 name 상태를 변경한다