🔍 프로젝트1. 카운터 앱

한 입 크기로 잘라 먹는 리액트 섹션 7- 프로젝트1. 카운터 앱

프로젝트 준비하기

npm create vite@latest
npm i

<App/>
<Viewer/>
<Controller/>

로 나누어 카운터 앱을 만든다.

.eslintrc.cjs 에서 no-unused-vars": "off", "react/prop-types": "off" 옵션을 작성한다.

    rules: {
      "no-unused-vars": "off",
      "react/prop-types": "off",
    },
  },
]);

public 폴더 아래에 있는 vite.svg 파일 삭제 & assets 폴더 아래에 있는 react.svg 파일 삭제
app.jsx 폴더 들어가서 return 문 안에 전부 다 비워준다.
index.css와 App.css 안의 기본 코드들을 전부 삭제해준다.
main.jsx에서는 StrictMode를 제거해준다.

UI 구현하기

Viewer.jsx 파일에 다음과 같은 코드를 넣어주고 App.jsx에서 Viewer.jsx를 import 하면

npm run dev를 해보면 다음과 같은 화면이 뜬다.

다음으로 Controller.jsx파일에 버튼태그를 작성한다.

App.jsx에 Controller를 import해준 후, Viewer와 Controller 를 나누기 위해 section을 나누는 코드를 작성한다.

npm run dev를 해주면

다음과 같은 화면을 구현 할 수 있다.

css를 지정하기 위해 App.css에 다음과 같이 작성한 후,

App.jsx에서 <div className="App">를 다음과 같이 작성해주면,

이러한 화면이 뜬다.

기능 구현하기

App.jsx에 [count, setCount]를 작성한다. =>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); //Controller의 명령을 받아와 현재 값과 선택된 값을 계산하는 코드!
  };

  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); //props로 전달받았다. 
        }}
      >
        -1
      </button>

      <button
        onClick={() => {
          onClickButton(-10);
        }}
      >
        -10
      </button>
      <button
        onClick={() => {
          onClickButton(-100);
        }}
      >
        -100
      </button>
      <button
        onClick={() => {
          onClickButton(+1);
        }}
      >
        +1
      </button>
      <button
        onClick={() => {
          onClickButton(+10);
        }}
      >
        +10
      </button>
      <button
        onClick={() => {
          onClickButton(+100);
        }}
      >
        +100
      </button>
    </div>
  );
};

export default Controller;

최종적으로 버튼을 클릭하면 카운터를 계산해주는 프로그램을 완성하였다.