1. 학습목표

리액트를 알아보자!

---

2. 학습내용

• 버튼을 누르면 숫자가 증감되는 간단한 카운터 앱을 만들어보았다.

---

• state와 props를 넘겨 받으려면 App.jsx에서 로직을 작성해야 한다.

---

App.jsx

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

function App() {
  const [count, setCount] = useState(0);
  const onClickBtn = (value) => {
    setCount(count + value);
  };

  return (
    <div className="App">
      <h1>Simple Counter</h1>
      <section>
        <Viewer count={count} />
      </section>
      <section>
        <Contoller onClickBtn={onClickBtn} />
      </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;
}

Viewer.jsx

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

export default Viewer;

Controller.jsx

const Controller = ({ onClickBtn }) => {
  return (
    <div>
      <button
        onClick={() => {
          onClickBtn(-1);
        }}

        -1
      </button>
      <button
        onClick={() => {
          onClickBtn(-10);
        }}

        -10
      </button>
      <button
        onClick={() => {
          onClickBtn(-100);
        }}

        -100
      </button>
      <button
        onClick={() => {
          onClickBtn(+100);
        }}

        +100
      </button>
      <button
        onClick={() => {
          onClickBtn(+10);
        }}

        +10
      </button>
      <button
        onClick={() => {
          onClickBtn(+1);
        }}

        +1
      </button>
    </div>
  );
};

export default Controller;

---

3. 마무리

• 리액트를 사용해서 처음 만들어본 앱이었다.
  자바스크립트와는 구현해 내는 방식이 많이 달라서 생소했지만
  상당히 생산성 있다고 느껴졌고 앞으로가 더욱 재밌을것 같다는 느낌이 든다.

• 이런것들에 얼른 익숙해져서 다양한것들을 구현해보고 싶다.