클래스형 vs 함수형 컴포넌트

React 컴포넌트는 클래스형 컴포넌트 또는 함수형 컴포넌트로 작성 될 수 있습니다.

클래스형 컴포넌트는 상태값을 가질 수 있고, React 컴포넌트의 생명 주기 함수를 작성 할 수 있습니다.

함수형 컴포넌트는 위와 같은 일을 할 수 없습니다.

즉, 이 둘의 차이점은 상태값과 라이프 사이클을 가질 수 있느냐 없느냐의 차이입니다.

 

리액트 버전 16.8 부터는 훅(Hook)이 등장하면서

함수형 컴포넌트에서도 상태값과 생명 주기 함수 코드를 작성 할 수 있게 되었습니다.

 

단순하게 말하자면

클래스형 컴포넌트는 모든 기능을 다 사용 할 수 있지만, 복잡합니다.

함수형 컴포넌트는 제한된 기능만 사용 할 수 있지만, 단순합니다.

(출처 생활코딩)

 

요즘은 클래스형 컴포넌트 보다는 함수형 컴포넌트 사용을 지향하는 추세입니다.

(React 공식 문서에서도 함수형 컴포넌트 + Hooks 조합을 추천하고 있다.)

---

클래스형

 

• class 키워드로 시작합니다.
• Component로 상속 받습니다.
• render() 함수를 사용하여 JSX를 반환합니다.
• props를 조회 할 때는 this 키워드를 사용합니다.

  import React, { Component } from "react";
  
  class Test extends Component {
    render() {
      const { name } = this.props;
  
      return <div>{name}님 환영합니다.</div>;
    }
  }
  
  export default Test;​

• defaultProps 설정 시 클래스 내부에 static 키워드와 함께 선언

  import React, { Component } from "react";
  
  class Test extends Component {
    // 첫번째 방법
    static defaultProps = {
      name: "오새봄",
    };
  
    render() {
      return <div>{this.name}</div>;
    }
  }
  
  // 두번째 방법
  Test.defaultProps = {
    name: "오새봄",
  };
  
  export default Test;​

---

함수형

• JSX를 return문을 사용하여 반환합니다.
• state를 사용 할 수 없습니다.
• 생명 주기 함수를 작성 할 수 없습니다.

  import React from "react";
  
  const Test = ({ name }) => {
    return <div>{name}님 환영합니다.</div>;
  };
  
  export default Test;
  
  -----------------------------------
  
  import React from "react";
  
  const Test = (props) => {
    const { name } = props;
    return <div>{name}님 환영합니다.</div>;
  };
  
  export default Test;
  
  -----------------------------------
  
  import React from "react";
  
  const Test = (props) => {
    return <div>{props.name}님 환영합니다.</div>;
  };
  
  export default Test;

• state와 생명 주기 함수를 사용하려면 훅(Hook)을 사용합니다.

  import React, { useState, useEffect } from "react";
  
  const Test = (props) => {
    const [name, setName] = useState();
  
    useEffect(() => {
      setName("오새봄");
    }, []);
  
    return <div>{name}님 환영합니다.</div>;
  };
  
  export default Test;​

---

[React] 클래스형 컴포넌트와 함수형 컴포넌트