앱 소개

앱UI

앱 설명

버튼을 누르면 숫자가 증가하거나 감소한다.

앱 설계 과정

배경화면으로 나눠진 것처럼 크게 3가지로 구성된다.

Simple Counter 부분과 나머지 흰 배경을 맡을 App컴포넌트

현재 카운트 : 부분을 맡을 Viewer 컴포넌트

버튼부분을 맡을 Controller 컴포넌트

---

강의를 보면서 진행 중이었는데, 앱을 만들 때는 보지 않고 어떻게 설계해야 할 지 고민했다.

이 때 state 변수를 통해 count를 수정해야 하는데 Viewer컴포넌트와 Controller컴포넌트가 어떻게 상호작용할 수 있을지 고민했다.

이전에는 부모 컴포넌트와 자식 컴포넌트가 상호작용하는 것이라 props를 사용하면 되겠다고 생각했었다.

고민하다가 강의를 통해 정답을 알게 됐다.

부모 컴포넌트에서 state 변수를 선언하고 두 자식 컴포넌트에게 알맞은 props를 전달하는 방식을 사용하면 된다.

이후 또 다른 고민은 onClick에 대한 props를 전달했을 때, 어떻게 한 번의 함수 수정으로 전달할 수 있을까?
-> 강의에서도 이 부분에서는 개별적으로 함수의 인자 수정을 통해 전달하는 방식을 사용했다.

---

• Viewer.jsx

import { useState } from "react";

const Viewer = ({count}) => {

    return (
        <div>
            <div>현재 카운트 :</div>
            <h2>{count}</h2>
        </div>
    )
}

export default Viewer;

• Controller.jsx

const Controller = ({onClickBtn}) => {
    return(
        <div>
            <button
                name={-1}
                value={-1}
                onClick={() => {
                    onClickBtn(-1)
                }}>-1</button>
            <button
                name={-10}
                value={-10}
                onClick={() => {
                    onClickBtn(-10)
                }}>-10</button>
            <button
                name={-100}
                value={-100}
                onClick={() => {
                    onClickBtn(-100)
                }}>-100</button>
            <button
                name={+100}
                value={100}
                onClick={() => {
                    onClickBtn(100)
                }}>+100</button>
            <button
                name={+10}
                value={10}
                onClick={() => {
                    onClickBtn(10)
                }}>+10</button>
            <button
                name={+1}
                value={1}
                onClick={() => {
                    onClickBtn(1)
                }}>+1</button>
        </div>
    )
}

export default Controller;

-App.jsx

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

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

  const onClickBtn = (value) => {
    setCount(count + value)
    console.log(value)
  }

  return (
    <div className='App'>
      <h1>Simple Counter</h1>
      
      <section>
        <Viewer count={count}/>
      </section>

      <section>
        <Controller onClickBtn={onClickBtn}/>
      </section>
    </div>
  )
}

export default App;

-App.css

body {
    padding: 20px;
}

.App {
    margin: 0 auto;
    width: 400px;
}

.App > section {
    background-color: lightgray;
    border: 1px solid lightgray;
    border-radius: 5px;
    padding: 20px;
    margin-bottom: 10px;
}

앱 만들기 강의의 궁극적인 포인트