ABOUT ME

-

Today
-
Yesterday
-
Total
-
  • 클래스형 컴포넌트와 함수형 컴포넌트
    개발 2020. 5. 25. 22:06

     

     

    컴포넌트를 선언하는 방식은 두 가지 입니다.

    하나는 함수형 컴포넌트이고, 또 다른 하나는 클래스형 컴포넌트 입니다. 

     

     

     

    먼저 클래스형 컴포넌트와 함수형 컴포넌트의 차이점에 대해 설명하기 위해 두 가지 방법의 코드를 보여드리겠습니다.

     

     

    함수형 컴포넌트

    import React from 'react';
    import './App.css';
    
    function App() {
      const name = 'react';
      return <div className="react">{name}</div>;
    }
    
    export default App;

     

    클래스형 컴포넌트

     

    import React, { Component } from 'react';
    
    class App extends Component {
      render(){
        const name = 'react';
        return <div className="react">{name}</div>;
      }
    }
    
    export default App;

     

     

    클래스형 컴포넌트와 함수형 컴포넌트의 역할은 똑같습니다.

     

    클래스형 컴포넌트와 함수형 컴포넌트의 차이점은 클래스형 컴포넌트의 경우 state 기능 및 라이프사이클 기능을 사용할 수 있다는 것과 임의 메서드를 정의할 수 있다는 것입니다.

     

    클래스형 컴포넌트에서는 render 함수가 꼭 있어야 하고, 그 안에서 보여 주어야 할 JSX를 반환해야 합니다.

     

     

    컴포넌트를 선언할 수 있는 두 가지 방법 중 어느 상황에서 함수형 컴포넌트를 사용해야할까요?

     

     

    함수형 컴포넌트의 장점

    • 클래스형 컴포넌트보다 선언하기가 훨씬 편합니다. 
    • 메모리 자원을 클래스형 컴포넌트보다 덜 사용합니다.
    • 프로젝트를 완성하여 빌드한 후 배포할 때도 함수형 컴포넌트를 사용하는 것이 결과물의 파일 크기가 더 작습니다.
      ( 함수형 컴포넌트와 클래스형 컴포넌트는 성능과 파일 크기 면에서 사실상 별 차이가 없으므로 이 부분은 너무 중요하게 생각하지 않아도 될 것같습니다. )

     

    함수형 컴포넌트의 주요 단점

    • state와 라이프사이클 API의 사용이 불가능합니다.
      하지만 이 단점은 리액트 v16.8 이후 Hooks라는 기능이 도입되면서 해결되었습니다. 완전히 클래스형 컴포넌트와 똑같이 사용할 수 있는 것은 아니지만 조금 다른 방식으로 비슷한 작업을 할 수 있게 되었습니다.

     

    따라서, 자기만의 state가 필요하지 않는 컴포넌트는 함수형 컴포넌트로 간단하게 작성하고, state가 필요한 컴포넌트는 클래스로 작성하실 수 있습니다.

    (함수형 컴포넌트에서 Hooks를 사용하지 않는다는 전제하에)

     

     


     

     

    리액트 공식 메뉴얼에는 컴포넌트를 새로 작성할 때 함수형 컴포넌트와 Hooks를 사용하도록 권장하고 있습니다.

    하지만 그렇다고 해서 클래스형 컴포넌트가 사라지는 것은 아니기 때문에 클래스형 컴포넌트도 알아두어야 합니다.

     

     

    '개발' 카테고리의 다른 글

    Cookie와 Session  (0) 2020.06.18
    Virtual DOM 과 DOM  (0) 2020.05.26
    web security ( XSS, CSRF, CORS와 OPTIONS 메서드 )  (0) 2020.05.20
    http 개체와 서버구축 (bare code)  (2) 2020.05.20
    JavaScript 비동기 처리를 위한 Promise  (0) 2020.05.19

    댓글 0

Designed by Tistory.