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

서론

리액트에서 컴포넌트를 정의하는 두 가지 방법이 있다. 바로 클래스형과 함수형 컴포넌트이다.
하나씩 알아보자.👊

🍫 클래스형 컴포넌트의 특징

선언

클래스형 컴포넌트를 정의하기 위해서는 class 키워드를 사용고 React.Component를 상속받는다.

import {Component} from 'react';
class MyComponent extends Component{}

state, props

• 클래스 내에서 state를 정의할 수 있다.
• this문법을 사용해서 state와 props에 접근할 수 있다.

라이프 사이클 메서드

LifeCycle Method를 사용해서 원하는 단계에서 작업을 수행할 수 있다.

라이프사이클 메서드가 궁금하다면? 👉 LifeCycleMethods

render

render() 메서드를 사용해서 렌더링 객체를 반환한다. (필수✨)

🍫 함수형 컴포넌트의 특징

선언

함수형 컴포넌트를 정의하는건 함수를 정의하는것과 같다. function 키워드를 사용하여 선언식으로 작성할 수도 있고, const 키워드를 사용해서 표현식으로 작성할 수 있다.

function MyComponent {} //선언식

const MyComponent = () => {} //표현식

state, props

• 함수형 컴포넌트에서는 useState 훅을 사용해서 state를 관리한다.
• 함수의 매개변수를 통해 props를 받아올 수 있다.

라이프 사이클 메서드 (Hooks!!) 💥

React Hook은 React 버전 16.8부터 새로 추가되었다. Hook이 나오기 전에는 라이프 사이클 메서드 사용을 위해 클래스형 컴포넌트를 썼지만 Hook이 나온 이후로는 useEffect, useMemo, useState와 같은 훅들을 사용해서 라이프사이클 메서드와 같은 기능을 수행할 수 있게되었다.✨

return

함수형 컴포넌트는 return 문에 jsx 코드를 넣어줌으로써 쉽게 렌더링 객체를 반환할 수 있다.

요약

	클래스형 컴포넌트	함수형 컴포넌트
선언	class 키워드	함수 선언식 / 표현식
state,props	this 키워드 사용	useState로 상태관리, 함수 매개변수로 props 받아오기
라이프사이클 메서드	라이프사이클 메서드	Hook
렌더링 객체 반환	render 함수	return