[새싹 성동 2기] 상태 내리기와 상태 올리기(state)

1. 상태 내리기

상태 내리기는 부모 컴포넌트의 상태를 자식 컴포넌트로 전달하는 방식입니다.
부모 컴포넌트의 상태를 자식 컴포넌트가 props를 통해 받아 사용합니다.
부모의 상태가 변경되면 부모와 해당 상태를 사용하는 모든 자식 컴포넌트가 다시 렌더링됩니다.

예제 코드: 두 자식 컴포넌트에서 상태를 계산하기

 

import { useState } from "react";

// 부모 컴포넌트 정의
function Parent() {
  const [number, setNumber] = useState(0); // 상태 값 정의

  return (
    <>
      {/* 부모 상태를 직접 보여줌 */}
      <h1>입력값: {number}</h1>
      {/* 상태를 변경하는 입력창 */}
      <input
        type="number"
        value={number}
        onChange={(e) => setNumber(e.target.value)}
      />
      {/* 상태를 자식 컴포넌트로 전달 */}
      <ChildA no={number} />
      <ChildB num={number} />
    </>
  );
}

// 첫 번째 자식 컴포넌트 (상태를 받아 2를 곱함)
function ChildA({ no }) {
  return (
    <>
      <h2>2를 곱한 값 : {no * 2}</h2>
    </>
  );
}

// 두 번째 자식 컴포넌트 (상태를 받아 3을 곱함)
function ChildB({ num }) {
  return (
    <>
      <h2>3를 곱한 값 : {num * 3}</h2>
    </>
  );
}

// 최상위 App 컴포넌트
function App() {
  return (
    <Parent />
  );
}

export default App;

• 부모 컴포넌트(Parent)에서 number라는 상태를 관리합니다.
• 이 상태는 자식 컴포넌트 ChildA와 ChildB로 전달됩니다.
• 자식 컴포넌트들은 부모의 상태를 props로 받아 자신만의 값을 계산해 렌더링합니다.

---

2. 상태 올리기

상태 올리기는 자식 컴포넌트에서 발생한 변경 사항(예: 버튼 클릭, 사용자 입력)을 부모 컴포넌트로 전달하는 방식입니다.
부모 컴포넌트에서 상태를 변경하는 함수를 만들어 자식 컴포넌트에 전달하면, 자식에서 부모의 상태를 변경할 수 있습니다.

예제 코드: 카운트와 색상을 관리하는 부모 컴포넌트

 

import { useState } from "react";
// 부모 컴포넌트 정의
function Parent() {
  const [count, setCount] = useState(0); // 카운터 상태
  const [color, setColor] = useState("black"); // 글자 색상 상태

  // 숫자를 증가/감소하는 함수
  const plusOne = () => setCount(count + 1);
  const minusOne = () => setCount(count - 1);

  return (
    <>
      {/* 상태에 따라 동적으로 스타일링 */}
      <h1 style={{ color }}>카운트: {count}</h1>
      {/* 상태 변경 함수를 자식에게 전달 */}
      <ChildA setColor={setColor} />
      <ChildB plusOne={plusOne} minusOne={minusOne} />
    </>
  );
}

// 첫 번째 자식 컴포넌트 (글자 색상 변경)
function ChildA({ setColor }) {
  return (
    <>
      <button onClick={() => setColor("red")}>붉은색</button>
      <button onClick={() => setColor("blue")}>파란색</button>
    </>
  );
}

// 두 번째 자식 컴포넌트 (숫자 증가/감소)
function ChildB({ plusOne, minusOne }) {
  return (
    <>
      <button onClick={plusOne}>하나 증가</button>
      <button onClick={minusOne}>하나 감소</button>
    </>
  );
}

// 최상위 App 컴포넌트
function App() {
  return (
    <Parent />
  );
}

export default App;

 

• 부모 컴포넌트 Parent는 두 가지 상태를 관리합니다: count와 color.
• 자식 컴포넌트 ChildA는 색상을 변경하는 버튼을 제공합니다.
• 자식 컴포넌트 ChildB는 카운트를 증가/감소시키는 버튼을 제공합니다.

 

 

 

 

 

 

 

 

 

*생성형 AI 활용한 클라우드&보안 전문가 양성캠프 과정의 교육내용 정리 자료입니다.