(5).이정환_react.js강의_ 프로젝트_실습1_카운터프로그램 만들기

 

내가 놓친 부분들 :

●1_ App컴포넌트에 각 컴보넌트마다, section 태그로 감싸서, 공통적인 Css는 한방에 적용되도록 한다.

●2_ App컴포넌트 맨 상위 태그를 div + className ="App" 으로 설정

그러면 , App.css를 아래와 같이 기재한다

.App>section {
  background-color: rgb(245, 245, 245);
  border: 1px solid rgb(240, 240, 240);
  border-radius: 5px;
  padding: 20px;
  margin-bottom: 10px;
}

●3_프로젝트 초기 셋팅의 CSS 중 알면 좋을 코드 :

.body {
  padding: 20px;  /*전체 컨텐츠의 브라우저 창 기준 약간의 여백*/
}

.App {
  margin: 0 auto; /*브라우저의 정가운데 배치되도록 한다다*/
  width: 400px; /*안에 컨텐츠의 크기*/
}

●4_보통 state 변수는 초기화 , 선언은 자식 컴포넌트가 아닌 부모 컴포넌트에 선언되어, 자식에게 전달 교류가 되어야 한다.

핵심 이유 : props 전달은 부모 => 자식 방향으로만 전달 가능하기 때문 (State Lifting)

따라서, App컴포넌트에 count State 변수 초기화

●★ 5_ App컴포넌트 => Controll컴포넌트 (버튼 모인 컴포넌트)

내 방식 : App 컴포넌트 => Controll컴포넌트로, setCount를 전달 , 버튼 핸들러 구현

강사님 방식 : App 컴포넌트에서 핸들러 구현 , App 컴포넌트 => Controll 컴포넌트로 핸들러 전달

최종 결과 코드 :

- App.js

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

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

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

export default App;

- App.css

.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;
}

- Controller.js

function Controller({ count, onChangeCount }) {
  const onClickBtn = (event) => {
    const pNum = Number(event.target.name);
    onChangeCount(count + pNum);
  };

  return (
    <div>
      <button onClick={onClickBtn} name="-1">
        -1
      </button>
      <button onClick={onClickBtn} name="-10">
        -10
      </button>
      <button onClick={onClickBtn} name="-100">
        -100
      </button>
      <button onClick={onClickBtn} name="100">
        +100
      </button>
      <button onClick={onClickBtn} name="10">
        +10
      </button>
      <button onClick={onClickBtn} name="1">
        +1
      </button>
    </div>
  );
}

export default Controller;

- Viewer.js

function Viewer({ count }) {
  return (
    <div className="Viewer">
      <p>현재 키운트 :</p>
      <h3>{count}</h3>
    </div>
  );
}

export default Viewer;