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

클래스형 컴포넌트

import React, { Component }  from 'react';

class App extends Component {
	render() {
    	return (
        	<div>Hello, {this.props.name}.</div>
         );
   };

클래스형 컴포넌트의 한계

• class가 코드 재사용성과 코드 구성을 어렵게 만든다.
• 코드 압축이 잘 안 되는 경우가 많고, 컴파일 단계에서 코드 최적화를 어렵게 만든다.

함수형 컴포넌트

함수로 정의하여 컴포넌트를 만든다.

import React from 'react';

const Hello = (props) => {
  return <div>Hello, {props.name}.</div>;
};

props를 매개변수로 받고 JSX를 리턴한다.
라이프사이클, State등 불필요한 기능을 제거한 상태이기 때문에 일반 클래스형 컴포넌트보다 메모리 소모량이 적고 성능도 좀 더 빠르다.

리액트 프로젝트에서 stat를 사용하는 컴포넌트 개수를 최소화하면 좋다.
state나 라이프사이클 API를 꼭 써야한다면 클래스 형태로 변환하여 컴포넌트를 작성하면 된다.

-> 하지만 hook을 통해서 함수형 컴포넌트도 state를 가질 수 있다.

함수형 vs 클래스형

• 함수형
  : 클래스형 컴포넌트에 비해 선언하기가 편함.
  
  

• 클래스형
  : render 함수가 반드시 존재해야 함.
  : state의 사용이 가능
  : 라이프 사이클 API의 사용이 가능

props 측면에서 차이점은?

클래스형 컴포넌트는 함수형 컴포넌트와 달리 props를 this.props로 사용한다.
props는 리액트에서 불변값이다. 하지만 this는 변경 가능하며 조작할 수 있다!

그래서 시간이 지나면 render나 다른 메서드를 호출할 때 업데이트 된 값들을 읽어올 수 있다. 따라서 요청이 진행되고 있는 상황에서 클래스 컴포넌트가 다시 렌더링 된다면 this.props도 바뀐다.

-> 예시 https://overreacted.io/ko/how-are-function-components-different-from-classes/