세 가지 모두 컴포넌트 간에 로직을 공유하지만, 시간이 지나며 발전했고 로직 공유에 대해서는 custom hook이 현대적 기본값입니다.
Higher-Order Component (HOC)
컴포넌트를 받아 향상된 컴포넌트를 반환하는 함수:
jsx
= => {
user = ();
user ? : ;
};
= ();
단점: 래퍼 중첩(트리에서 "wrapper hell"), prop 이름 충돌, 그리고 주입된 props가 어디서 오는지 불분명함.
컴포넌트가 함수를 자식으로 받아 state를 공유:
<Mouse>{({ x, y }) => <Cursor x={x} y={y} />}</Mouse>
유연하지만, 여러 render-prop 컴포넌트를 중첩하면 "콜백 피라미드"가 생깁니다.
상태 로직을 useX 함수로 추출 — 추가 트리 중첩 없음, 명시적 데이터 흐름:
function useMouse() {
const [pos, setPos] = useState({ x: 0, y: 0 });
useEffect(() => { /* 리스너 부착, cleanup */ }, []);
return pos;
}
function Component() {
const { x, y } = useMouse(); // 명확하고, 평평하며, 합성 가능
}
children/컴포넌트 전달).