[React] Component의 유형

Component의 기능

컴포넌트는 데이터가 주어졌을 때 이에 맞춰 UI를 만들어 주고 라이프사이클 API를 이용하여 컴포넌트가 화면에서 나타날 때, 사라질 때, 변화가 일어날 때 주어진 작업들을 처리할 수 있으며, 임의 메서드를 만들어 특별한 기능을 붙여줄 수 있다.

 

 

 

컴포넌트를 선언하는 두 가지 방식

컴포넌트를 선언하는 방법은 두가지가 있다.

 

1. 함수형 컴포넌트

 

App.js

import React from 'react';
import './App.css';

function App() {
    const name = '리액트';
    return <div className="react">{name}</div>
}

export default App;

 

2. 클래스형 컴포넌트

 

App.js

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를 반환해야 한다.

언제 어떤 컴포넌트를 사용해야 하나요? (함수형 컴포넌트 위주)

함수형 컴포넌트는 클래스형 컴포넌트보다 선언하기가 훨씬 편하고 메모리 자원도 클래스형 컴포넌트보다 덜 사용합니다. 또한, 프로젝트를 완성하여 빌드한 후 배포할 때도 함수형 컴포넌트를 사용하는 것이 결과물의 파일 크기가 더 작다. 하지만 함수형 컴포넌트는 라이프사이클 API의 사용이 불가능하다. 결국 리액트 v16.8 업데이트 이후 Hooks라는 기능이 도입되면서 해결됐다.

[참고 문헌] (https://www.aladin.co.kr/shop/wproduct.aspx?ItemId=204819510)

 

 

 

(전 블로그에서 2021.01.23 21시 57분에 작성한 글입니다.)