[React] 카운터 만들어보기

순서

1. 컴포넌트 분리
2. UI 구현하기 (+CSS)
3. 기능 구현하기

목표

현재 카운트를 볼 수 있는 Viewer 컴포넌트
카운트를 증감시킬 수 있는 Controller 컴포넌트

내가 한 코드

count 변수를 Viewer와 Controller 컴포넌트에서 공유해야하기때문에,
App.jsx에서 useState로 count 변수를 만들어서 props로 전달

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

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

export default App;

Viewer.jsx

function Viewer({ count }) {    // 구조분해할
  return (
    <div>
      <div>현재 카운트 : </div>
      <h1>{count}</h1>
    </div>
  );
}

export default Viewer;

Counter.jsx

const Controlloer = ({ setCount, count }) => {
  const onClickCount = (e) => {
    setCount(count + Number(e.target.value));
  };

  return (
    <div>
      <button onClick={onClickCount} value={-1}>
        -1
      </button>
      <button onClick={onClickCount} value={-10}>
        -10
      </button>
      <button onClick={onClickCount} value={-100}>
        -100
      </button>
      <button onClick={onClickCount} value={+100}>
        +100
      </button>
      <button onClick={onClickCount} value={+10}>
        +10
      </button>
      <button onClick={onClickCount} value={+1}>
        +1
      </button>
    </div>
  );
};

export default Controlloer;

💡 hook은 함수컴포넌트 안에서만 호출 가능

후보

1. app 컴포넌트
2. viewer 컴포넌트
3. controller 컴포넌트

부모와 자식관계에 있지않기 떄문에 어떠한 값을 공유할 수 없어

부모인 app 컴포넌트(공통부모)에 state 변수를 만들

데이터를전달하는 방법 ⇒ props

props는 부모에서 자식으로만 전달가능

💡 개선점

Controller.jsx에 props를 넘길때, count 와 setCount를 모두 넘겨야하므로 (번거롭)
이벤트핸들러를 만들어서 걔만 전달하기

// value를 인자로 받아서 굳이 props로 넘기지말고 App.jsx에 해결하기
const onClickButton = (value) => {
	setCount(count + value)
};

⚠️ 알게된 점1

value로 전달하는 값은 문자열이 된다!
DOM에서 value 속성이 문자열 속성이기 때문

⚠️ 알게된 점2

onClick이벤트를 통해 함수에 인자를 넣을 때, onClick 으로 바로 함수를 넘겨주면 안된다

<button onClick={onClickButton(-1)}>-1</button>

화살표 함수를 이용해서 함수를 감싸고 넘겨주어야한다.

<button onClick={()=>{onClickButton(-1)}}>-1</button>

매개변수를 받는 함수는 화살표 함수 로 감싸기
매개변수를 받지 않는 함수는 함수 이름만 써도 ok

// 매개변수를 받지않는 함수였다면
<button onClick={onClickButton}>-1</button>

이유

컴포넌트가 렌더링될 때, 해당 함수가 즉시 실행되기때문에 원하는 이벤트일 때 결과를 얻을 수가 없음

클릭할 때 함수 자체 를 불러와야하는데 함수의 실행값을 전달해주게 됨

◾ State Lifting (State 끌어올리기)

state들을 위로 끌어올려서 계층구조 아래있는 컴포넌트들이 공유할 수 있도록 만드는 방법

단방향

출처 : 한입 크기로 잘라먹는 리액트