6.1) 프로젝트 소개 및 준비

• ONEBITE-REACT 폴더로 이동
• npm create vite@latest
• 프로젝트 폴더로 이동
• npm i
• npm run dev
• ESLint 옵션 - eslint.config.js - rules

  "no-unused-vars": "off",
  "react/prop-types": "off",

• 불필요한 이미지파일, CSS 파일 내부 코드, main.jsx 내부 StrictMode 태그 삭제

6.2) UI 구현하기

• 카운트라는 state는 Viewer나 Controller 컴포넌트가 아닌, App 컴포넌트에 만들어줘야한다.
• 리액트에서 컴포넌트 간 데이터를 주고받을때는 props를 이용한다. props는 오직 부모에서 자식으로만 전달된다.
• 형제관계인 Viewer와 Controller는 데이터를 주고 받을 수 없다.
  
• 기본 컴포넌트 Viewer, Controller 생성 및 CSS 스타일링

6.3) 기능 구현하기

실습

App.jsx

import "./App.css";
import Viewer from "./components/Viewer.jsx";
import Controller from "./components/Controller.jsx";
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>
  );
}

export default App;

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(-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;

• const onClickButton : Controller 컴포넌트가 count값을 바꾸려면 count state와 setCount 함수 모두 전달해주어야한다. 이보다 좋은 것은 부모컴포넌트에서 이벤트 핸들러를 전달하는 것.

keypoint

• 화면 구성에서 여러 개의 컴포넌트들이 부모와 자식 관계를 이루며 계층 구조를 형성한다.
• 특정 컴포넌트가 다른 컴포넌트에게 데이터를 전달하려면 반드시 두 컴포넌트는 서로 부모 자식 관계를 가지고 있어야 한다.
• 하나의 스테이트를 여러 컴포넌트를에서 관리하게 될 경우 이 스테이트는 반드시 이런 컴포넌트들의 공통 부모가 되는 곳에 만들어야 된다는 점

State Lifting, 스테이트 끌어올리기

• 스테이트를 계층 구조 상 위로 끌어올려서 아래 있는 컴포넌트들이 모두 공유할 수 있도록 만드는 방법