React 실습 1: Counter App

intro

UI 구현하기

1. components 폴더 생성
2. Viewer, Controller 컴포넌트 생성
3. export import로 연결
4. App.css파일로 UI 정리

function Viewer() {
    return (
        <div>
            <div>현재 카운트 :</div>
            <h1>0</h1> 
        </div>

    )
}

export default Viewer;

import './App.css'
import Viewer from './components/Viewer'
import Controller from './components/Controller'

function App() {
  return (
    <div className = "App">
      <h1>Simple Counter</h1>
      <section>
        <Viewer />
      </section>
      <section>
        <Controller />
      </section>
    </div>
  );
}

export default App

function Controller(){
    return (
        <div>
            <button>-1</button>
            <button>-10</button>
            <button>-100</button>
            <button>+100</button>
            <button>+10</button>
            <button>+1</button>
        </div>
    )
}

export default Controller;

/*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;
}

• UI 최종본
  

기능 구현하기

• 위의 그림에서 현재 카운트 숫자를 리랜더링해가면서 변경해야하므로 이를 state를 사용해서 랜더링해야 함
• state는 컴포넌트 내부에서만 생성이 가능함. 이 때 state를 생성해야 할 컴포넌트는 App.jsx 컴포넌트임
  이유: React는 정보를 props를 통해 전달하는데, props는 부모 > 자식 경로로만 전달이 가능함. Controller.jsx나 Viewer.jsx는 서로 형제관계이므로 서로 값을 공유할 수 없음. 즉, 컴포넌트 계층구조 때문에 App.jsx에 생성해야 함
• 이를 state lifting이라고 함!

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

  // {count, setCount}로 Controller에게 넘겨주고 Controller에서 이벤트 핸들러 함수를 각각 만들기보다는, 
  // App.jsx에서 한번에 이벤트 핸들러 함수를 만들어서 props로 넘겨주는 것이 나음!

  const onClickButton = (value) => {
    setCount(count + value) // value는 버튼의 -1, +10 등의 값들!
  }

  return (
    <div className = "App">
      <h1>Simple Counter</h1>
      <section>
        <Viewer count = {count}/>
      </section>
      <section>
        <Controller onClickButton = {onClickButton}/>
      </section>
    </div>
  );
}

export default App

// Controller.jsx
function 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;

// Viewer.js
function Viewer({count}) {
    return (
        <div>
            <div>현재 카운트 :</div>
            <h1>{count}</h1> 
        </div>

    )
}

export default Viewer;