클래스형 vs 함수형 컴포넌트
본문 바로가기
항해 후/예상 질문

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

by 은돌1113 2022. 2. 14.

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] 클래스형 컴포넌트와 함수형 컴포넌트

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

velog.io

반응형

'항해 후 > 예상 질문' 카테고리의 다른 글

메모이제이션  (0) 2022.02.14
SEO  (0) 2022.02.14
시멘틱 태그  (0) 2022.02.10
TypeScript(타입스크립트)  (0) 2022.02.10
Context API  (0) 2022.02.10

댓글