Class Component

• function 컴포넌트는 뭔가를 리턴하고 스크린에 표시되지만 class 컴포넌트는 react 컴포넌트로부터 확장되고 스크린에 표시된다.
• react는 자동적으로 class 컴포넌트의 렌더 메서드를 실행된다.
• 클래스 컴포넌트를 쓰는 이유는 state를 쓰기 위해서다.

State

• state는 객체이며 컴포넌트의 데이터를 state에 넣을 수 있다.
• state의 데이터는 바꿀 수 있으며, 바꿀때는 setState()를 이용해야 한다.
• class 컴포넌트에서 state를 쓸때는 컴포넌트의 형태가 클래스이기 때문에 this.state로 사용할 수 있다.

import React from 'react';
import PropTypes from 'prop-types';

class App extends React.Component {
  state = {
    count: 0,
  };

  render() {
    return <h1>state is ? {this.state.count}</h1>;
  }
}

export default App;

• button에는 기본적으로 onClick이라는 prop이 있다.
• 아래 코드와 같이 setState에서 바로 this.state를 하는 것은 성능이슈가 발생할 수 있다.

import React from 'react';
import PropTypes from 'prop-types';

class App extends React.Component {
  state = {
    count: 0,
  };

  add = () => {
    this.setState({
      count: this.state.count + 1
    })
  };

  minus = () => {
    this.setState({
      count: this.state.count -1
    })
  };

  render() {
    
    // 중략

export default App;

• 대신에 아래와 같이 current를 이용하여 하는 방법이 외부상태에 의존하지 않는 가장 좋은 방법이다. (current는 현재의 state의 값을 얻을 수 있다.)

import React from 'react';
import PropTypes from 'prop-types';

class App extends React.Component {
  state = {
    count: 0,
  };

  add = () => {
    this.setState(current => ({
      count: current.count + 1
    }))
  };

  minus = () => {
    this.setState(current => ({
      count: current.count - 1
    }))
  };

  render() {
    
    // 중략

export default App;

• setState를 호출할때 마다 리액트는 새로운 state와 함께 render function을 호출한다.!!!(중요)
• constructor는 리액트에서 오는게 아니며, 자바스크립트에서 class를 만들 때 호출된다.

Life Cycle Method

• 리액트 클래스 컴포넌트는 life cycle method를 가지고 있다.
• 가장 자주 쓰이는 Life Cycle Method

// 컴포넌트가 마운트되고 난 뒤에 실행되는 메서드
// 렌더가 실행되고 메서드가 실행된다.
componentDidMount()

// state가 업데이트되고 난 뒤(setState된 뒤에)에 메서드가 실행된다. 
componentDidUpdate()

// 컴포넌트가 떠날 때 실행되는 메서드다.
// 다른 페이지를 갈 때와 같은 경우
componentWillUnmount()

• 이를 활용한 예제로 render 함수 내에 삼항연산자와 componentDidMount를 이용하여 API로 부터 데이터를 받으면 state를 변화시켜 렌더를 다시 시키는 것을 할 수 있다.

import React from 'react';

class App extends React.Component {
  state = {
    isLoading: true,
    
  };

  // 아래 메서드로 2초 뒤에 isLoading을 false로 변경
  // 처음에는 Loading이 렌더 된 뒤에 We are READY가 렌더된다.
  componentDidMount() {
    setTimeout(() => {
      this.setState({
        isLoading: false,
      });
    }, 2000);
  }

  render() {
    const { isLoading } = this.state;
    return <div>{isLoading ? 'Loading !!' : 'We are READY!!!!!!'}</div>;
  }
}

export default App;