SingleProject_State Lifting

간단하게 버튼을 눌러 count값을 조정하는 프로그램 작성

body {

  padding: 20px;

}

.App {

  margin: 0 auto;

  width: 400px;

}

.App > section {

  background-color: rgb(245, 245, 245);

  border: 1px solid rgb(240, 240, 240);

  border-radius: 5px;

  padding: 20px;

  margin-bottom: 10px;

}

import "./App.css";

import Viewer from "./components/Viewer";

import Controller from "./components/Controller";

import { useState } from "react";

// 카운트 값을 조정하기 위해선 형제관계의 컴포넌트끼리 props로 전달X

// 부모 컴포넌트 즉, 현재는 App컴포넌트에서 조정하여 전달해야함

// State Lifting이 위와 같은 방법을 이용한 것

// -> 리액트는 단방향 데이터 흐름이므로 직관적임

// -> 따라서 State를 어떤 Component에 위치시킬지 중요함

function App() {

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

  const onClickButton = (value) => {

    setCount(count + value);

  };

  return (

    <div className="App">

      <h1>Simple Counter</h1>

      {/* props로 전달 함 */}

      <section>

        <Viewer count={count} />

      </section>

      {/* props로 전달 함 */}

      <section>

        <Controller onClickButton={onClickButton} />

      </section>

    </div>

  );

}

export default App;

 

// 객체 구조 분해 할당으로 count 받아옴

const Viewer = ({ count }) => {

  return (

    <div>

      <div>현재 카운트 : </div>

      <h1>{count}</h1>

    </div>

  );

};

export default Viewer;

 

// 객체 구조 분해 할당으로 onClickButton 받아옴

const Controller = ({ onClickButton }) => {

  return (

    <div>

      <button

        onClick={() => {

          onClickButton(-1);

        }}

      >

        -1

      </button>

      <button

        onClick={() => {

          onClickButton(-10);

        }}

      >

        -10

      </button>

      <button

        onClick={() => {

          onClickButton(-100);

        }}

      >

        -100

      </button>

      <button

        onClick={() => {

          onClickButton(+100);

        }}

      >

        +100

      </button>

      <button

        onClick={() => {

          onClickButton(+10);

        }}

      >

        +10

      </button>

      <button

        onClick={() => {

          onClickButton(+1);

        }}

      >

        +1

      </button>

    </div>

  );

};

export default Controller;