Why React Created Functional Components

January 21, 2025

컴포넌트 작성 방식의 두 가지 접근법

프론트엔드 프레임워크나 라이브러리에서는 컴포넌트를 작성 할 때, 보통 두가지 방법으로 만들 수 있습니다.
클래스 또는 함수형 컴포넌트 입니다.

클래스형 컴포넌트를 사용하는 대표적인 프레임워크로는 Angular가 있습니다. Angular는 Angular.js 이후 타입스크립트와 클래스형 컴포넌트를 도입했습니다.

클래스형 컴포넌트의 단점

저는 다년간 Angular를 사용해본 경험으로 클래스형 컴포넌트의 장단점을 잘 알고 있습니다. 개인적으로는 클래스형 컴포넌트의 장점보다는 단점이 많다고 생각합니다.

그 이유를 살펴보겠습니다. 클래스형 컴포넌트의 양날의 검은 this 입니다. this를 이용해 클래스 멤버 변수나 메서드에 빠르게 접근 할 수 있습니다. 이는 반대로 큰 단점으르 지니고 있는데

바로 this로 참조하는 변수의 상태를 계속해서 추적해야 합니다. 이는 컴포넌트의 비즈니스 로직이 복잡해질수록 더 추적하기 어려워집니다.

많은 리액트 개발자 분들이 Angular를 접하면 가장 힘들어 하는 것이 this로 변수를 참조하는 것이 디버깅 하기 어렵다 말합니다. 실제로 저도 동일한 개발 경험을 해왔습니다.

리액트의 함수형 컴포넌트 도입

리액트가 지금까지 부동의 1위 자리를 지킬 수 있던 것은 함수형 컴포넌트의 도입이라 생각합니다. 리액트도 초기에는 클래스형 컴포넌트였지만 리액트 팀에서도 위에서 언급한 것과 동일하게 상태를 this로 추적해나가면 컴포넌트 로직을 위 아래로 왔다갔다 해야하는 것이 개발 경험에 좋지 못함을 인지하고 있었습니다.

함수형 컴포넌트의 단순함과 장점

함수형 컴포넌트는 아주 단순합니다. 함수를 실행 할 뿐입니다. 그 과정중에 메모이제이션 된 값은 재활용하고 가상 돔을 이용하여 렌더링을 최적화 할 뿐입니다. 그래서 리액트의 훅들은 함수형 컴포넌트에서 가장 상단에 존재해야 하는 것도 이 때문입니다.

비록 리렌더링 하는 것은 함수를 재실행 하는것으로 동작하기 때문에 내부에 많은 최적화를 해야 하는것도 맞지만, 그 만큼 함수형 컴포넌트가 개발 경험을 향상 시키는 것은 사실입니다.

목적에 따라 함수형 또는 클래스형 컴포넌트를 사용하는 것은 개발자의 몫이지만 위와 같은 내용을 분명히 인지하고 선택해야 합니다.