[React] 함수형 컴포넌트와 클래스 컴포넌트의 차이점

서론

---

오늘은 리액트를 배운 사람이라면 한 번쯤은 묻게 되는 기본적인 내용에 관해서 정리해보려고 합니다. 지금은 함수형 컴포넌트와 Hooks로 리액트 컴포넌트를 작성하는 게 일반적이지만, Hook가 정식으로 추가되기 전인 React 버전 16.8 (2019년 2월 출시) 이전에는 클래스형 컴포넌트를 작성하는 것이 일반적이었습니다.
또 오픈소스 프로젝트 중 여전히 클래스형 컴포넌트로 작성된 경우가 더러 있습니다. 따라서 오늘은 그 둘의 차이점에 대해서 알아보고, 리액트에서 왜 Hooks로 작성하는 것을 권장하는 지 알아보도록 하겠습니다.



이 차이는 클래스와 함수의 차이에서 비롯됩니다. 함수형에서는 this가 가리키는 undefined인 반면, 클래스형에서는 해당 객체를 가리킵니다. 문제는 이 this가 컴포넌트 렌더링 시에 계속 새롭게 바인딩되면서 this.props 등 this로 가리키는 값이 달라질 수 있습니다. 반면 함수형 컴포넌트에선 호출되는 시점의 값이 잘 전달되는 것을 알 수 있습니다. 이는 클로저에서 함수의 상위 스코프의 변수 값에 대한 참조 값이 유지되는 것과 같은 원리입니다. 이에 관한 자세한 설명은 아래 아티클을 참조해주시길 바랍니다.

참조한 사이트

함수형 컴포넌트와 클래스, 어떤 차이가 존재할까?