[한입 크기로 잘라 먹는 리액트] - 프로젝트 1 (카운터 앱)

 

---

강의 - Section 6 : 프로젝트 1. 카운터 앱

유데미 : https://www.udemy.com/course/winterlood-react-basic/

인프런 : https://www.inflearn.com/course/%ED%95%9C%EC%9E%85-%EB%A6%AC%EC%95%A1%ED%8A%B8

[2024] 한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지 강의 | 이정환 Winterlood - 인프런

---

 

 

 

프로젝트1. 카운터 앱

프로젝트 소개 및 준비

 

 

* 사용자가 카운트를 증가하거나 감소할 수 있는 카운터 프로젝트

* 현재 카운터 표시 영역은 'Viewer', 증가 및 감소 버튼은 'Controller'의 컴포넌트를 각각 만들어서 구현할 것이다.

 

 

 

프로젝트1. 카운터 앱

UI 구현하기

 

* App.jsx

function App() {

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

export default App

 

 

* Viewer.jsx

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

export default Viewer;

 

 

*Controller.jsx

const 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;

 

 

 

프로젝트1. 카운터 앱

기능 구현하기

 

* 현재 카운트를 나타내는 state는 어디에 추가를 하면 좋을까?

 - 정답은 현재 카운트를 보여주는 Viewer가 아니라 App 컴포넌트이다. 이유는 App이 부모컴포넌트이기 때문에, 하위 컴포넌트(Viewer, Controller)에서 데이터를 쉽게 공유하거나 업데이트 할 수 있다.

 

 

*App.jsx

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

 

 

* Viewer.jsx

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

export default Viewer;

 

 

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

 

 

* 이번 프로젝트를 통해서 알게된 것은 React는 단방향 데이터 흐름이라는 것이다.

   단방향 데이터 흐름은 React의 핵심 개념 중 하나로, 데이터가 한 방향으로만 흐르는 구조를 의미한다. React에서는 

   부모 컴포넌트가 데이터를 생성하고 관리하며, 이를 자식 컴포넌트로 props를 통해 전달할다.