[React] 카운터 앱을 만들어보자

아주 쉬운 예제지만 컴포넌트에 익숙해지기 위해 만들어보았다.

 

 

구현화면

 

 

 

App.jsx

 

import React, { useState } from 'react'

import './App.css'

import Counter from './pages/Counter'

function App() {

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

  const handleCount = (value) =>{

      setCount(count+value);

  }

  return (

    <main>

      <div>counter를 구현해보자</div>

      <Counter count={count} handleCount={handleCount} />

    </main>

  )

}

export default App

 

 

pages 폴더의 Counter 컴포넌트를 import 하고,

<Counter>를 호출하면서 props로 count, handleCount를 넘겨주었다.

 

 

Counter.jsx

 

import React from 'react';

const Counter = (props) => {

    return (

        <div>

            <p>현재 카운터 : {props.count}</p>

            <button onClick={ () => props.handleCount(+1) }>+1</button>

            <button onClick={ () => props.handleCount(-1) }>-1</button>

            <button onClick={ () => props.handleCount(+10) }>+10</button>

            <button onClick={ () => props.handleCount(-10) }>-10</button>

        </div>

    )

}

export default Counter;

 

 

현재 카운터를 props.count 로 찍어주고,

각 버튼에는 onClick 이벤트를 주었다.

 

 

 

다시한번 정리하기

state(count)와 state에 변경을 주는 이벤트(handleCount)는 부모 컴포넌트인 App에 작성해야 한다.

하위 컴포넌트인 Counter는 props를 통해 부모로부터 state와 함수 등을 건네 받아 사용할 수 있다.

 

리액트의 상태 관리 원칙

상태(state)는 그 상태를 소유한 부모 컴포넌트에서 변경해야 함

 

예측 가능한 상태 변화

모든 상태 변경이 부모에서만 이루어지므로, 디버깅이 쉽고 안정적임

 

props는 읽기 전용

자식 컴포넌트는 부모에서 받은 props를 직접 변경할 수 없음

 

단방향 데이터 흐름 

리액트에서는 컴포넌트 간에 데이터를 전달할 때는 props를 사용하는데,

전달 방향은 언제나 부모에서 자식에게 전달하는 방식이어야 한다.

이렇게 정한 이유는 데이터의 흐름을 이해하기 쉽고, 관리하기 좋다는 장점 때문이다.

부모는 자식에게 데이터를 전달할 수 있지만, 자식은 부모에게 직접적으로 데이터를 전달할 수 없다.

 

역방향 이벤트 전달

자식 컴포넌트에서 발생한 이벤트가 부모 컴포넌트로 전달되어, 부모의 state(상태)를 변경한다.

자식 컴포넌트에서 onClick시 props.handleCount 이벤트가 발생이 되고,

이 이벤트는 부모 컴포넌트로 전달되어 실행되고,

함수 내에서 setCount를 하여 state를 변경한다.

 

 

*데이터는 위에서 아래로, 이벤트는 아래에서 위로!