모던 리액트 Deep Dive를 읽고 정리한 내용입니다.
서론
•
이미 0.14 버전에서 리액트에는 함수형 컴포넌트가 존재
◦
무상태 컴포넌트: 단순히 어떤 요소를 정적으로 랜더링
•
16.8 버전에서 훅이 소개되면서 함수형 컴포넌트가 각광받게 됨
클래스형 컴포넌트의 한계
•
데이터의 흐름을 추적하기 어렵다
◦
각기 다른 라이프사이클 매서드에서 상태업데이트 부수효과 처리
▪
서로 다른 메서드에 로직이 흩어져 state → UI 변경 흐름 추적 어려움
•
ex) componentDidUpdate에서 API 호출componentWillUnmount에서 정리(clean-up) → 하나의 기능을 이해하려면 여러 메서드를 오가며 확인해야 함.
•
내부 로직의 재사용이 어렵다
◦
컴포넌트를 HOC로 감싸거나 props 넘겨주는 방식
▪
중첩이 깊어지면 래퍼 지옥(wrapper hell)에 빠질 수 있음
◦
컴포넌트 상속
▪
상속되는 컴포넌트의 흐름을 추적하기 힘듬
•
기능이 많아질수록 컴포넌트의 크기가 커진다
◦
상태 관리, 이벤트 핸들러, 렌더링 로직, 라이프사이클 처리 → 하나의 클래스
◦
단일 책임 원칙(SRP)을 지키기 어렵고, 유지보수성과 테스트성이 떨어짐
•
클래스는 함수에 비해 상대적으로 어려움
•
코드 사이즈를 최적화 하기 어려움
•
핫 리로딩에 불리함
