리액트 학습#02 - 카운터 앱

카운터 앱 만들기

 

1. 리액트 프로젝트 생성

    npm create vite@latest

 

2. npm 빌드

    npm install

 

3. 소스코드 구현

    1) components 디렉토리 생성 및 Controller.jsx, Viewer.jsx 파일 생성

    2) 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;

 

    3) Viewer.jsx 컴포넌트 수정

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

export default Viewer;

 

    5) main.jsx 수정

import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App.jsx'
import './index.css'

ReactDOM.createRoot(document.getElementById('root')).render(
    <App />
)

 

    6) App.css수정

body {
  padding: 20px;
}

.App {
  margin: 0 auto;  /* auto 설정시 화면 여백 자동으로 margin설정 -> 가운데 정렬 효과 */
  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;
}

 

    7)  index.css  내용 삭제

 

    8) 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. 결과화면

 

 

학습 내용은  강사님 동의하에 "udemy 한입 크기로 잘라먹는 리액트 강의"를 참조하여 작성하고 있습니다.