• 목록

컴포넌트 쪼갰더니 더 복잡해진 이유

리팩터링이 성스러울 수만은 없다

리액트를 쓰다 보면 "컴포넌트를 더 잘게 쪼개야지" 라는 강박이 생기기 쉽다.
근데... 쪼개면 더 어려워질 때가 있다.

흔한 문제 상황

// Button.tsx
export const Button = ({ label, onClick }) => (
  <button onClick={onClick}>{label}</button>
);

// Parent.tsx
<Button label="삭제" onClick={() => handleDelete(item.id)} />

처음엔 깔끔해 보이지만, 점점 로직이 안 보이고,
컴포넌트끼리 맥락이 끊기기 시작한다.

그래서 진짜 중요한 건 "쪼개는 기준"

너무 일찍 쪼개면 오히려 가독성과 유지보수성을 해친다.
→ 특히 로직이 바깥으로 퍼져나갈 때 그 피해가 큼

✅ 고수의 리팩터링 방식

처음엔 로직과 뷰를 함께 둔다.
→ "쪼갤 필요가 생겼을 때" 그때 분리한다.

// Parent.tsx
const Parent = ({ item }) => {
  const handleDelete = () => {
    deleteItem(item.id);
    toast("삭제 완료!");
  };

  return <button onClick={handleDelete}>삭제</button>;
};

이게 더 읽기 쉽고, 맥락도 잘 보임

언제 쪼개야 할까?

• 재사용이 필요할 때

• 너무 길어질 때

• 테스트를 쉽게 하고 싶을 때

그 외에는 웬만하면 한 파일에 담아도 괜찮다.
쪼개는 게 무조건 정답은 아님!