프론트엔드 면접 준비 : 리액트 클래스형 컴포넌트와 함수형 컴포넌트의 차이

클래스형 컴포넌트와 함수형 컴포넌트는 리액트 애플리케이션에서 컴포넌트를 구성하는 두 가지 주요 형태입니다. 

 

• 클래스형 컴포넌트는 상태값을 가질 수 있고, 리액트 컴포넌트의 생명 주기 함수를 작성할 수 있습니다.
• 함수형 컴포넌트는 이 모든 일을 할 수 없습니다.

그래서 간단하게 이 둘의 차이점을 살펴보면 상태값과 LifeCycle 가질 수 있느냐 없느냐입니다.

 

다음은 이 두 가지 컴포넌트 유형의 주요 차이점에 대해 더 자세히 을 살펴보겠습니다.

클래스형 컴포넌트

• 클래스형 컴포넌트는 class 키워드를 사용하여 작성됩니다.
• Component 클래스를 상속받아서 작성됩니다.
• render() 메서드를 사용하여 JSX를 반환합니다.
• props를 조회할 때 this 키워드를 사용합니다.
• 상태값을 가질 수 있으며, constructor 내부에서 this.state를 설정합니다.
• 생명 주기 함수를 작성할 수 있습니다.
• defaultProps를 설정할 때 클래스 내부에 static 키워드와 함께 선언합니다.

import React, { Component } from 'react';

class Hello extends Component {
  render() {
    const { color, name, isSpecial } = this.props;
    return (
      <div style={{ color }}>
        {isSpecial && <b>*</b>} 안녕하세요 {name}
      </div>
    );
  }
}

export default Hello;

 

클래스형 컴포넌트에서 상태를 관리

 

 

 

import React, { Component } from 'react';

class MyComponent extends Component {
  constructor(props) {
    super(props); // 부모 클래스의 생성자 호출

    // 초기 상태값 설정
    this.state = {
      count: 0,
      name: 'John',
    };
  }

  render() {
    const { count, name } = this.state;
    return (
      <div>
        <p>Count: {count}</p>
        <p>Name: {name}</p>
      </div>
    );
  }
}

export default MyComponent;

클래스의 생성자 메서드 constructor 에서 bind 작업

import React, { Component } from 'react';

class Counter extends Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0,
    };

    // 이벤트 핸들러 함수를 bind
    this.handleIncrease = this.handleIncrease.bind(this);
    this.handleDecrease = this.handleDecrease.bind(this);
  }

  handleIncrease() {
    this.setState({ count: this.state.count + 1 });
  }

  handleDecrease() {
    this.setState({ count: this.state.count - 1 });
  }

  render() {
    return (
      <div>
        <p>Count: {this.state.count}</p>
        <button onClick={this.handleIncrease}>Increase</button>
        <button onClick={this.handleDecrease}>Decrease</button>
      </div>
    );
  }
}

export default Counter;

defaultProps 설정

class Hello extends Component {
  static defaultProps = {
    name: '이름없음'
  };

  render() {
    const { name } = this.props;
    return (
      <div>Hello, {name}!</div>
    );
  }
}

 

함수형 컴포넌트

• 함수형 컴포넌트는 return 문을 사용하여 JSX를 반환합니다.
• 상태값을 직접 가질 수 없으며, useState 훅을 사용하여 상태를 관리합니다.
• 생명 주기 함수를 작성할 수 없었으나, 리액트 버전 16.8부터 훅(Hook)이 등장하면서 함수형 컴포넌트에서도 상태값과 생명 주기 함수 코드를 작성할 수 있게 되었습니다.

import React from 'react';

function Hello({ color, name, isSpecial }) {
  return (
    <div style={{ color }}>
      {isSpecial && <b>*</b>} 안녕하세요 {name}
    </div>
  );
}

export default Hello;