CountButton과 Number 컴포넌트를 만들어봅시다.

여기서는 함수를 Props로 받는 CountButton과 state를 Props로 받는 Number 컴포넌트를 위한 파일을 만들겠습니다. 그리고 styled-components를 통해 간단하게 App 컴포넌트를 스타일링해봅시다.

• src/App.js

import React, { Component } from "react";
import CountButton from "./components/CountButton";
import Number from "./components/Number";
import styled from "styled-components";

const Wrapper = styled.div`
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100px;
  margin-top: 100px;
`;

const ButtonWrapper = styled.div`
  width: 100%;
  display: flex;
  justify-content: space-between;
  margin-bottom: 50px;
`;

class App extends Component {
  state = {
    number: 0
  };

  // 1. state를 업데이트하는 함수를 전달
  countUp = () => {
    this.setState(({ number }) => ({
      number: number + 1
    }));
  };

  // 2. setState 함수 앞에서 값을 받고 이를 전달
  countDown = () => {
    const { number } = this.state;
    this.setState({ number: number - 1 });
  };

  render() {
    // Destructing Assignment 문법을 사용한 방식
    const { countUp, countDown } = this;
    const { number } = this.state;

    return (
			<Wrapper>
        <ButtonWrapper>
          <button onClick={countUp}>+</button>
          <button onClick={countDown}>-</button>
        </ButtonWrapper>
        {number}
      </Wrapper>
    );
  }
}

export default App;

이 파일에서 styled-components를 활용해 Wrapper와 ButtonWrapper 컴포넌트를 만들어주었습니다. 그리고 CountButton 컴포넌트와 Number 컴포넌트를 만들어보겠습니다. 이 프로젝트에서는 styled-components를 사용하기 때문에 CSS 파일은 만들 필요가 없습니다. 디렉토리 구조는 아래와 같습니다.

Counter

• node_moduels
• public
• src
  • components
    • CountButton
      • CountButton.js
      • index.js
    • Number
      • Number.js
      • index.js
  • App.js
  • index.js
  • serviceWorker.js
• .gitignore
• package.json
• README.md
• yarn.lock

CountButton, Number 폴더 내의 index.js 파일은 아래와 같은 코드를 입력해주세요.