Class형 React

생활코딩을보고 React를 경험해보는 시간을 가지게 되었다.

개발환경

npx create-react-app .

터미널에 위와 같은 명령어를 작성하여 기본적으로 사용할 수 있는 환경을 가져왔다.
이 명령어 하나로 모든 세팅은 끝이난다.
실습으로 들어가기전 리액트에서 사용되는 컴포넌트들에 대해서 미리 알아보도록 하자.

componentWillMount 란?

render()가 실행되기 전에 호출된다.
요즘은 잘 사용하지 않는다고 한다.
지금은 현재 UNSAFE_componentWillMount()
로 이름이 변경되었다.

componentDidMount 란?

componentDidMount()는 컴포넌트가 마운트된 직후, 즉 트리에 삽임된 직후에 호출된다. DOM 노드가 있어야 하는 초기화 작업은 이 메서드에서 이루어지면 된다.
이 메서드는 데이터 구독을 설정하기 좋은 위치이다.

랜덤버튼 클릭 후 리랜더링 될 경우

componentWillUpdate 란?

지금은 현재 UNSAFE_componentWillUPdate()로 변경되었다. 새로운 props또는 state가 전달되어서 랜더링이 이루어지기 전에 호출된다. 이 메서드에서는 this.setState를 호출할 수 없다.
통상적으로 이 메서드는 componentDidUpdate로 대체할 수 있다.

componentDidUpdate 란?

componentDidUpdate()는 갱신이 일어난 직후에 호출된다. 즉 State의 값이 변경되어 rerender될때 render() 이후에 호출된다. 최초 렌더링에서는 호출되지 않는다.

shouldComponentUpdate() 란?

shouldComponentUpdate는 props또는 state가 새로운 값으로 갱신되어 리랜더링이 발생하기 직전에 호출된다. 기본값은 true이다.

이 메서드가 false를 반환할 경우 지금은 현재 UNSAFE_componentWillUPdate(), render(), componentDidUpdate()는 호출되지 않는다.

이제 코드를 살펴보자.

import React , {useState, useEffect} from 'react';
import './App.css';

function App() {
  return (
    <div className="container">
      Hello World
      <FuncComp></FuncComp>
      <ClassComp></ClassComp>
    </div>
  );
}

var classStyle = 'color:red';
class ClassComp extends Component {
  state = {
    number: Math.random(),
    _date: (new Date()).toString()
  }

  componentWillMount() {
    console.log('%cclass => componentWillUnmount', classStyle)
  }

  componentDidMount() {
    console.log('%cclass => componentDidMount', classStyle)
  }

  shouldComponentUpdate() {
    console.log('%cclass => shouldComponentUpdate', classStyle)
    return true;
  }

  componentWillUpdate() {
    console.log('%cclass => componentWillUpdate', classStyle)
  }

  componentDidUpdate() {
    console.log('%cclass => componentDidUpdate', classStyle)
  }

  render() { 
    console.log('%cclass => render', classStyle)
    return (
      <div className="container">
        <h2>class style component</h2>
        <p>Number : {this.state.number}</p>
        <p>Date : {this.state._date}</p>
        <p>여기는 버튼 한개로 만들기!</p>
        <input type="button" value="random" onClick={
          function(){
            this.setState({
              number:Math.random(),
              _date: (new Date()).toString()
            })
          }.bind(this)
        }></input>
      </div>
    )
  }
}

먼저 리액트를 사용하기 위해서는

import React , {Component ,useState, useEffect} from 'react';

위의 문구를 추가해주어야 한다.
useState 와 useEffect 는 functional React에서 다룰 계획이다.

우선 class형 Component는 render()가 필수적으로 필요하다.
render()는 위의 App에 DOM을 그려준다고 생각하면 된다.
이때 render에서 사용할 값들을 state에 등록하여 사용할 수 있는데 그 onClick함수를 통해 그 state의 값을 변경할 수 있고 변경하기위한 메서드는 setState이다.
class형 Component를 공부하면서 느낀 가장 큰 단점은 이러한 기능을 통해 state의 값을 변경하기 위해서 bind(this)를 사용해 주어야 한다는 것이 가장 큰 단점인 것 같았다.

요즘에는 클래스형 컴포넌트보다 함수형 컴포넌트를 더 선호한다고 한다.
다음시간에는 함수형 컴포넌트를 공부하여 어떠한 차이점이 있는지 알아볼 계획이다.