Props를 받아 어떻게 처리하는지 알아봅시다

먼저 Number 컴포넌트를 작성해봅시다.

• src/components/Number.js

import React from "react";
import styled from "styled-components";

const Count = styled.div`
  padding: 5px 0;
  width: 200px;
  text-align: center;
  border: 1px solid black;
  font-size: 2rem;
`;

const Number = props => {
  return <Count>{props.number}</Count>;
};

export default Number;

props는 위와 같이 함수의 인자로 받아옵니다. props는 number가 담긴 객체로 props.[속성명] 이런 식으로 사용합니다. 그런데 여기서 Destructing Assignment를 활용하면 코드를 더 간단하게 바꿀 수 있습니다. 아래의 코드를 확인해보세요.

• src/components/Number.js

// Destructing Assignment 문법을 통해 props 안에 있는 number를 가져옴
const Number = ({ number }) => {
  return <Count>{number}</Count>;
};

이런식으로 props를 받아서 화면에 출력을 해줍니다. 그럼 이제 App 컴포넌트에서 Number 컴포넌트를 불러와 state 값을 전달해보겠습니다.

• src/App.js

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

(생략)

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 number={number} />
      </Wrapper>
    );
  }
}

export default App;

이렇게 하면 스타일이 적용된 상태로 숫자 값이 화면에 표시될 것입니다. 다음으로 CountButton 컴포넌트를 작성해보도록 하겠습니다. 이 컴포넌트에는 버튼 안에 들어갈 텍스트와 클릭 시 실행될 함수를 Props로 전달하겠습니다.