[React] 함수 컴포넌트와 클래스 컴포넌트의 근본적 차이


[React] 함수 컴포넌트와 클래스 컴포넌트의 근본적 차이

우리는 React를 사용하며 일반적으로 함수 컴포넌트를 자주 사용하곤 한다. 함수에서 hook을 사용할 때 말고, 함수 컴포넌트와 클래스 컴포넌트는 근본적으로 어떤 차이점이 있는걸까? 각 컴포넌트들이 state, props같은 데이터들을 조작할 때의 패러다임을 기준으로 한번 비교해보고자 한다. 아래 글을 많이 참고했다. https://overreacted.io/how-are-function-components-different-from-classes/ 위 글에도 그대로 있는 내용인데, 이 글의 결론은 이 한줄로 모든 게 설명 가능하다. "함수 컴포넌트는 렌더될 값을 캡쳐한다" 1. 서론 이 한 줄의 글만 보면 이해하기 쉽지 않을테니, 예제로 어떤 차이인지 간단하게 알아보자. 아래와 같은 함수 컴포넌트가 있다고 해보자. 버튼을 누르면 상태가 변경되고 2초뒤에 상태가 콘솔에 찍히는 예제이다. import React, { useState } from "react"; const App = ...


#react클래스형컴포넌트 #react함수형컴포넌트 #리액트컴포넌트 #리액트클래스형컴포넌트 #리액트함수형컴포넌트 #클래스형컴포넌트 #함수형컴포넌트 #함수형컴포넌트클래스형컴포넌트차이 #클래스형컴포넌트함수형컴포넌트차이

원문링크 : [React] 함수 컴포넌트와 클래스 컴포넌트의 근본적 차이