[15] Class Component vs Functional Component

Class Component vs Functional Component

리액트의 꽃이자 리액트의 핵심인 컴포넌트
이 컴포넌트를 만드는 방법에는 2가지가 있다.
클래스형 컴포넌트와 함수형 컴포넌트이다.

Class Component

과거에는 클래스형 컴포넌트를 주로 사용했지만 2019년 v16.8 부터 함수형 컴포넌트에 리액트 훅을 지원해 현재는 함수형 컴포넌트와 훅을 함께 사용할 것을 권장하고 있다.
클래스형 컴포넌트의 경우 state 기능 및 라이프 사이클 기능을 사용할 수 있으며 임의 메서드를 정의할 수 잇다.
state를 정의할 수 있고 render 함수의 return 값에 따라 원하는 UI를 보여줄 수 있다.

class ClassCoponent extends React.Component{
	state ={
    
    };
    render(){
    	return(
        	<div className = "Container"> </div>
        );
    }
}

기본적으로 클래스형 컴포넌트와 함수형 컴포넌트가 하는 동작은 같다. 하자민 클래스형 컴포넌트는 보다 더 많은 기능을 제공해주는 것이 함수형 컴포넌트와 가장 큰 차이점이다. state를 이용한 상태를 나타내거나 componenet lifecyle에 정의된 메서드를 이용해 원하는 순서에 특정한 동작을 하도록 할 수 있다.

Functional Component

함수형 컴포넌트는 클래스형 컴포넌트보다 선언하기 좀 더 편하고, 메모리 자원을 덜 사용한다. 과거에는 함수형 컴포넌트에서 state와 라이프사이클 API를 사용할 수 없다는 단점이 있었늗네 이러한 단점은 리액트 훅이 도입되면서 해결되었다.

함수형 컴포넌트 선언 방식에는 기존의 함수 선언 방식이 있고, ES6의 화살표 함수 방식이 있다. 화살표 함수의 경우 파라미터로 전달할 떄 유용하다.

import React from 'react';

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

export default App;

함수형 컴포넌트에서 State 생성하기

함수형 컴포넌트에서 state를 생성하는 방법은 useState 메서드를 사용한다.

import {useState} from 'react'
const [state, setState] = useState()

참고
https://devowen.com/298