1. 클래스형 컴포넌트?

react 컴포넌트 선언 방식 중 하나로 class를 이용하여 컴포넌트를 구성하는 방식입니다. 현재는 함수형 컴포넌트 사용이 권장되지만 함수형 컴포넌트가 나오기 예전 프로젝트의 유지보수를 위해 클래스형 컴포넌트에 대한 개념의 이해가 필요합니다.

클래스형 컴포넌트 사용

• 클래스형 컴포넌트는 class 키워드가 필요하며 react의 Compenent를 상속받아야합니다.
• render() 메소드를 통해 UI를 반환합니다.
• 상태관리 및 lifeCycle을 setState와 lifeCycle 메소드를 통해 관리합니다.

import React, { Component } from "react";

export default class ClassTest extends Component {
  // state 초기값 설정
  state = {
    nickname: "",
    age: 0,
    disabled: true,
  };

  // nickname, age 상태가 바뀔 때 마다 실행
  componentDidUpdate(prevProps, prevState) {
    // 조건문을 주어서 무한 반복을 막아야함
    // state 값이 변경됬을 경우에만 실행되도록 함
    if (
      this.state.nickname !== prevState.nickname ||
      this.state.age !== prevState.age
    ) {
      if (this.state.nickname && this.state.age !== "0") {
        this.setState({ disabled: false });
      } else {
        this.setState({ disabled: true });
      }
    }
  }

  changeNickname = (e) => {
    this.setState({ nickname: e.target.value });
  };

  changeAge = (e) => {
    this.setState({ age: e.target.value });
  };

  onSubmit = (e) => {
    e.preventDefault();
    console.log(`닉네임: ${this.state.nickname} 나이: ${this.state.age}`);
  };

  render() {
    return (
      <form onSubmit={this.onSubmit}>
        <div>
          <label htmlFor="input-nickname">닉네임 : </label>
          <input
            id="input-nickname"
            value={this.state.nickname}
            onChange={this.changeNickname}
            type="text"
          />
        </div>
        <div>
          <label htmlFor="input-age"> 나이 : </label>
          <input
            style={{ width: "30px", margin: "20px 0px" }}
            id="input-age"
            value={this.state.age}
            onChange={this.changeAge}
            type="number"
            min="0"
          />
        </div>
        <button type="submit" disabled={this.state.disabled}>
          확인
        </button>
      </form>
    );
  }
}

클래스형 컴포넌트의 lifeCyle

[출처] : https://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/

1 ) 마운트 : 컴포넌트가 렌더링이 되고 최초 한번 실행

constructor => render => ref => compoentDidMout

• constructor : 컴포넌트가 새로 생성이 되고 렌더링(DOM 생성) 이전에 수행이 되는 클래스 생성자 메서드를 의미합니다. 생성자로 props를 전달받아 state를 초기화해야 할 때 사용하는 메서드 state를 초기화하지 않는다면 구현하지 않아도 됩니다. 반드시 첫 줄에 super(props) 를 호출해야하며 그렇지 않은 경우 오류가 발생합니다.
• render : 화면에 출력할 내용을 생성하여 반환합니다. prpos와 state 값으로만 생성해야합니다. Side-Effect를 발생시켜서는 안됩니다.
• ref : 컴포넌트 라이프 사이클 내에서 유지가 되며, 변경이 가능한 변수이며, 값이 변할 때 렌더링이 되지 않습니다.
• compoentDidMout : render()의 반환 값이 DOM에 반영된 후 호출됩니다. 컴포넌트가 DOM에 반영된 시점이므로 DOM으로부터 필요정보 조회가 가능합니다. setState() 메서드 호출과 Side-Effect 코드 실행이 가능합니다.