Counter 프로젝트에 여러 개의 LifeCycle API를 만들어봅시다.

4장에서 작성했던 Counter 프로젝트에서 실습을 진행하겠습니다. 이전 페이지에서 언급했던 자주 쓰이는 LifeCycle API를 추가해보겠습니다. 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
  };

  constructor(props) {
    super(props);
    console.log("constructor 호출");
  }

  componentDidMount() {
    console.log("componentDidMount 호출");
  }

  shouldComponentUpdate(nextProps, nextState) {
    console.log("shouldComponentUpdate 호출");
    if (nextState.number % 3 === 0) return false;
    return true;
  }

  componentDidUpdate(prevProps, prevState) {
    console.log("componentDidUpdate 호출");
  }

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

    console.log("render 호출");

    return (
      <Wrapper>
        <ButtonWrapper>
          <CountButton onClick={countUp} text="+" />
          <CountButton onClick={countDown} text="-" />
        </ButtonWrapper>
        <Number number={number} />
      </Wrapper>
    );
  }
}

export default App;

위와 같이 만들고 콘솔 창을 확인해보세요. 그리고 앞서 말씀드렸던 순서대로 LifeCycle API가 호출되는지도 확인해보세요.

그리고 number가 3이 되었을 때, 컴포넌트가 리렌더링 되지 않는 것도 확인해보세요.