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

1. React에서 컴포넌트를 어떻게 생성하나요?

리액트에서 컴포넌트를 생성하는 방법은 크게 두 가지가 있습니다. 

1.1) 클래스형 컴포넌트

리액트에서 컴포넌트를 정의할 때 EcmaScript6에 도입된 class문법에 의해 정의된 컴포넌트를 클래스형 컴포넌트라고 합니다. 컴포넌트에서 라이프사이클 API를 사용해야 하거나 state를 사용하는 경우 클래스형 컴포넌트로 정의해야 합니다. (하지만, 리액트 16.8 버전에서 새롭게 공개된 Hook을 사용하면, 함수형 컴포넌트에서도 state를 사용할 수 있습니다.)

 

리덕스를 사용하여 Container, Presentational 컴포넌트를 구성할 때, 여기서 Container 컴포넌트가 클래스형 컴포넌트에 해당합니다.

 

import React, {Component} from 'react';

class ClassComp extends Component{
  state= {
    username: "1day1commit",
  }

  render(){
    return(
      <div>
        <h1>Hello, {this.state.username}</h1>
      </div>
    )
  }
}

export default ClassComp;

 

1.2) 함수형 컴포넌트

 단순히 컴포넌트 라이프사이클 API를 사용하지 않고 부모 컴포넌트로부터 props를 전달받아 뷰를 렌더링 하는 역할을 하는 컴포넌트라면 함수형 컴포넌트로 정의할 수 있습니다. (하지만, 리액트16.8버전에서 새롭게 공개된 Hook을 사용하면, 함수형 컴포넌트에서도 state를 사용할 수 있습니다.)

 

리덕스를 사용하여 Container, Presentational 컴포넌트를 구성할 때, 여기서 Presentational 컴포넌트가 함수형 컴포넌트에 해당합니다.

1. 함수형 컴포넌트

function functionalComp(props){
  return(
    <h1>Hello, {props.username}</h1>
  )
}

export default functionalComp;

2. ES6 화살표 함수형 컴포넌트

import React from 'react';

const functionalComp = (props) => {
  return(
  <h1>Hello, {props.username}</h1>
  )
}

export default functionalComp;

3. ES6 화살표 함수형 컴포넌트 (비구조화 할당)

import React from 'react';

const functionalComp = ({username}) => {
  return(
  <h1>Hello, {username}</h1>
  )
}

export default functionalComp;