[React] 카운터앱, State Lifting

1. 컴포넌트 단위로 나누기

2. UI 구현

컴포넌트에서 Controller.jsx랑 View.jsx를 만들어준다.

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

export default Viewer;

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;

 

그뒤 App.jsx의 <div>안에 입력해준다. 

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

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

export default App;

App.css를 통해 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;
}

3. 기능 구현

특정 값을 변경시킬때, 변경된 값을 컴포넌트가 즉시 화면에 렌더링하려면 state를 작성한다. 

그래야 화면에 리렌더링된다. 

state는 컴포넌트 내부에서만 만들 수 있다

 

1. 현재 카운트를 렌더링하는 뷰어 컴포너트 (o)

2. 컨트롤러 컴포넌트

3. 앱 컴포넌트

 

 

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;

 

스테이트의 계층구조 기억!

1️⃣부모-자식 관계를 이루며 계층 구조를 형성한다.

2️⃣ 특정 컴포넌트가 다른 컴포넌트에게 데이터를 전달하려면 반드시 두 컴포넌트는 서로 부모 자식관계여야한다.

3️⃣ 하나의 스테이트를 여러 컴포넌트에서 관리할 경우 이 스테이트는 반드시 공통 부모가 되는 곳에 만들어야한다. 

=> State Lifting(State 끌어올리기)

 

Props를 이용해 부모 → 자식 관계 (위 → 아래, 단방향 데이터 흐름) 방향 [흐름 파악 쉽고, 직관적] 으로 데이터 전달

그럴때 State Lifting기억하기