Props와 이벤트 핸들러

카운터 앱을 만들었다. 뷰만 다루다가 리액트로 작은 기능을 만들어보면서 배운점은 두가지이다.

먼저, 앱의 구조는 아래와 같다. Viewer 컴포넌트는 현재 카운트를 보여주는 역할을 하고, Controller 컴포넌트는 카운트 계산 역할을 한다.

 

배운점 1. 컴포넌트에게 데이터 전달하려면, 부모 자식 관계여야 한다.

하나의 state를 여러 컴포넌트에서 관리해야할 경우, 공통 부모에 state를 명시해야 한다. 그래서 App 컴포넌트에 count 변수를 선언하고 Viewer 컴포넌트에는 props로 넘겨준다.

 

배운점 2. 컴포넌트에게 데이터를 전달하려면, 부모-자식 관계여야 한다.

그렇다면 Controller 컴포넌트에서 count 값을 어떻게 조정할까? 이는 이벤트 핸들러를 부모 컴포넌트에 정의하고, 정의한 이벤트 핸들러를 자식인 controller 컴포넌트에 props로 전달하면 된다.

 

전체 코드는 아래와 같다.

// App.jsx
import "./App.css";
import Viewer from "./components/Viewer";
import Controller from "./components/Controller";
import { useState } from "react";

function App() {
  const [count, setCount] = useState(0);

  const onClickButton = (value) => {
    setCount(count + value);
  };

  return (
    <div className="App">
      <h1>Simple Counter</h1>
      <section>
        <Viewer count={count} />
      </section>
      <section>
        <Controller onClickButton={onClickButton} />
      </section>
    </div>
  );
}

// Viewer.jsx
const Viewer = ({ count }) => {
  return (
    <div>
      <div>현재 카운트 : </div>
      <h1>{count}</h1>
    </div>
  );
};

export default Viewer;

// Controller.jsx
const Controller = ({ onClickButton }) => {
  return (
    <div>
      <button
        onClick={() => {
          onClickButton(-100);
        }}
      >
        -100
      </button>
      <button
        onClick={() => {
          onClickButton(-10);
        }}
      >
        -10
      </button>
      <button
        onClick={() => {
          onClickButton(-1);
        }}
      >
        -1
      </button>
      <button
        onClick={() => {
          onClickButton(+1);
        }}
      >
        +1
      </button>
      <button
        onClick={() => {
          onClickButton(+10);
        }}
      >
        +10
      </button>
      <button
        onClick={() => {
          onClickButton(+100);
        }}
      >
        +100
      </button>
    </div>
  );
};
export default Controller;