⚛️리액트 카운터 만들기⚛️

이번에는 리액트 State로 간단한 카운터를 만드는법을 포스팅해보겠습니다.

먼저 이번 프로젝트의 완성이미지입니다.

본격적으로 시작해보겠습니다

1.프로젝트 생성

리액트 프로젝트를 생성하여줍니다
(리액트 프로젝트 생성은포스트를 확인해 주세요)

2.기본설정

생성이후 필요없는 기본값의 파일들을 삭제합니다
App.css내용
public안에 여러 이미지파일

---

이제 카운터를 만들 준비가 끝났습니다
이제 본격적으로 진행하여보겠습니다

1.UI와 기능구현

파일구조는 이렇게 만드시면 됩니다

먼저 카운터의 기능을 담당할 두 컴포넌트의 코드를 짜보겠습니다

1.Controller.jsx

각각 -1, -10, -100, +100, +10, +1 값을 추가할수있는 버튼을 만듭니다

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;

2.Viewer.jsx

현재 카운트 현황을 보여줄코드

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

export default Viewer;

이번엔 여러 컴포넌트를 조합하여 화면에 랜더링하는App.jsx와 App.css의 코드를 짜보겠습니다

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

export default App;

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

마지막으로 주의할점

1. import할때 변수명 대소문자를 주의하며 작성하세요.
2. 꼭 export default "변수명";으로 데이터를 내보내주세요.
3. 잊지말고 import하며 데이터를 불러오세요.

이번 포스트는 여기까지 입니다😋