TIL no.45 - 클래스형 컴포넌트 vs 함수형 컴포넌트

참고 문서
[React] 클래스형 컴포넌트 vs 함수형 컴포넌트

React의 컴포넌트 선언에는 2가지 방법이 있다.

클래스형 컴포넌트와 함수형 컴포넌트가 있다.
공식 문서에서는 함수형 컴포넌트 + Hooks 를 통해 컴포넌트를 작성하는 것을 권장한다.

클래스형 컴포넌트

import React, { Component } from 'react';

class App extends Component {
    render() {
        return (
            <div>
                
            </div>
        );
    }
}

export default App;

• state 기능 및 라이프 사이클 기능을 사용할 수 있다.
• 임의 메서드를 정의 할 수 있다.
• Component로 상속을 받아야 한다.
• class 키워드와 render 함수가 꼭 있어야 한다.

함수형 컴포넌트

import React from 'react';

const App = () => {
    return (
        <div>
            
        </div>
    );
};

export default App;

• 클래스형 컴포넌트에 비해 선언하기가 보다 쉽고 메모리 자원을 덜 사용한다.
• 과거에는 state와 라이프 사이클 기능을 이용할 수 없는 단점이 있었으나 Hook이 도입된 이후로 해결되었다.
• 성능과 가독성이 더 좋다.
• 빌드 후 배포시 결과물의 크기가 작다.

state 사용 비교

컴포넌트 내부에서 바뀔 수 있는 값 state

클래스형 컴포넌트

class App extends Component {

    state = {
        userName : "",
        users: []
    }
    

• 객체 형식
• this.setState로 함수의 state의 값 변경

함수형 컴포넌트

const [value, setValue] = useState('')

• useState 함수로 state를 사용
• useState 함수 호출시 배열이 반환되며 첫 번째 원소는 현재 값, 두번째 원소는 상태를 바꿔주는 함수

클래스형 컴포넌트는 Stateful 컴포넌트, 함수형 컴포넌트는 Stateless 컴포넌트라고 하기도 한다. 클래스형 컴포넌트는 로직과 상태를 컴포넌트 내에서 구현하기 때문에 stateful로 불리며 상대적으로 복잡한 로직을 가지고 있다. 반면 함수형 컴포넌트는 state를 사용하지 않고 단순하게 데이터를 받아서(props) UI에 뿌려주기 때문에 stateless라고 한다.

props 사용 비교

클래스형 컴포넌트

    render() {
        const {name, age } = this.props;

        return (
            <div>
                안녕하세요 , 저는 {name} 입니다.
                올해 {age} 입니다.
            </div>
        );
    }

this.props로 통해 값을 불러올 수 있다.

함수형 컴포넌트

const App = ({name, age}) => {
    return (
        <div>
            안녕하세요 , 저는 {name} 입니다.
            올해 {age} 입니다.
        </div>
    );
};

props 없이 바로 불러올 수 있다.