[React] React에서 상태를 업데이트하는 함수를 전달하는 예제

안녕하세요! 이번 블로그 글에서는 React에서 상태를 업데이트하는 함수를 자식 컴포넌트로 전달하고 활용하는 예제를 살펴보겠습니다. 이를 통해 각 컴포넌트 간의 효율적인 상태 관리 방법을 배울 수 있습니다.

Box 컴포넌트 생성

먼저, 간단한 박스 컴포넌트(Box.jsx)를 생성합니다. 이 컴포넌트는 클릭할 때마다 색이 변경되는 기능을 가지고 있습니다.

import "./Box.css";
function Box({ isActive, toggle }) {
  return (
    <div
      onClick={toggle}
      className="Box"
      style={{ backgroundColor: isActive ? "red" : "black" }}
    ></div>
  );
}

export default Box;

BoxGrid 컴포넌트 생성

다음으로, Box 컴포넌트를 이용하여 게임 보드(Grid)를 생성하는 BoxGrid 컴포넌트를 만듭니다. 이 컴포넌트는 각 박스의 상태를 관리하고, 리셋 기능을 제공합니다.

import Box from "./Box";
import { useState } from "react";
function BoxGrid() {
  const [boxes, setBoxes] = useState([
    false,
    false,
    true,
    false,
    true,
    false,
    false,
    false,
    false,
  ]);
  const reset = () => {
    setBoxes([false, false, false, false, false, false, false, false, false]);
  };

  const toggleBox = (idx) => {
    setBoxes((oldBoxes) => {
      return oldBoxes.map((value, i) => {
        if (i === idx) {
          return !value;
        } else {
          return value;
        }
      });
    });
  };
  return (
    <div className="BoxGrid">
      {boxes.map((b, idx) => (
        <Box key={idx} isActive={b} toggle={() => toggleBox(idx)} />
      ))}
      <button onClick={reset}>Reset</button>
    </div>
  );
}

export default BoxGrid;

스타일링

마지막으로, 각 박스와 게임 보드에 대한 스타일을 지정하는 CSS 파일을 만듭니다.

/* Box.css */

.Box {
  width: 100px;
  height: 100px;
  display: inline-block;
  margin: 10px;
}

.BoxGrid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

이제 이 예제를 통해 React에서 상태를 효율적으로 관리하고, 함수를 자식 컴포넌트로 전달하는 방법을 이해할 수 있습니다. 계속 진행해주세요! 🚀

 

클릭하면 'red' 색상으로 변경

리셋시