일상이 개발
React 컴포넌트 구조와 실전 패턴: 유지보수가 쉬운 코드 작성법
디어노미
2025. 4. 4. 19:06
반응형
⚛️ React 컴포넌트 구조와 실전 패턴: 유지보수가 쉬운 코드 작성법
React를 어느 정도 사용하다 보면 생기는 고민이 있어요.
"컴포넌트가 점점 커지는데, 어떻게 나눠야 하지?"
"파일 구조를 어떻게 잡는 게 좋을까?"
오늘은 초보자도 따라 할 수 있는 React 컴포넌트 구조화 팁과
실무에서 자주 사용하는 컴포넌트 설계 패턴을 예시와 함께 소개할게요.
📁 1. React 컴포넌트를 왜 나눠야 할까?
처음에는 App.js 하나로 시작하지만, 기능이 늘어나면 코드가 1000줄 넘는 괴물이 되기 쉽습니다.
컴포넌트를 잘게 나누면:
- 재사용 가능성 ↑
- 유지보수 쉬움
- 기능 단위로 코드 분리
즉, 컴포넌트 구조를 잘 잡아두면 프로젝트가 커져도 흔들리지 않는 React 앱이 됩니다!
🧱 2. 컴포넌트 나누는 기준
가장 흔한 기준은 다음과 같아요:
- 화면 단위: 페이지(views) → 컴포넌트
- 기능 단위: 버튼, 리스트, 입력창 등
- 역할 단위: 로직 담당 vs UI 담당
예를 들어 쇼핑몰이라면?
- Page:
ProductPage.js - Components:
ProductCard,AddToCartButton
📌 3. 파일 구조, 이렇게 짜보세요
src/
├── pages/
│ └── HomePage.js
├── components/
│ ├── Header.js
│ ├── Footer.js
│ └── ProductCard/
│ ├── index.js
│ ├── ProductCard.css
│ └── ProductCard.test.js
├── hooks/
├── utils/
└── App.js
💡 팁: 컴포넌트 폴더 단위로 관리하면 스타일, 테스트 파일도 함께 묶을 수 있어요!
💡 4. 실전에서 자주 쓰는 컴포넌트 패턴
이제 실무에서 자주 보는 패턴 3가지를 소개할게요.
① 프레젠테이셔널 vs 컨테이너 패턴
- 프레젠테이셔널(Presentational): UI 중심 (스타일, 레이아웃)
- 컨테이너(Container): 데이터 중심 (API, 상태 관리)
// ProductList.js (Container)
function ProductList() {
const [products, setProducts] = useState([]);
useEffect(() => {
fetchProducts().then(setProducts);
}, []);
return <ProductListView items={products} />;
}
// ProductListView.js (Presentational)
function ProductListView({ items }) {
return (
<ul>
{items.map(item => (
<li key={item.id}>{item.name}</li>
))}
</ul>
);
}
② Atomic Design
디자인 시스템 관점에서 구성하는 방법입니다.
- Atoms: 버튼, 텍스트 등 가장 작은 단위
- Molecules: 입력창 + 버튼 조합
- Organisms: 헤더, 카드 리스트 등 큰 조합
→ 디자인/기획과 협업할 때 강력한 구조예요.
③ Layout 패턴
공통되는 구조 (헤더 + 본문 + 푸터)를 재사용하는 방식입니다.
// Layout.js
function Layout({ children }) {
return (
<div>
<Header />
<main>{children}</main>
<Footer />
</div>
);
}
// App.js
<Layout>
<HomePage />
</Layout>
→ 페이지마다 공통 레이아웃을 반복하지 않아도 됨
🧩 5. 상태 관리도 구조화 포인트!
컴포넌트를 나누다 보면 상태(state)도 복잡해져요.
- 부모 → 자식으로 전달 (props)
- 전역 상태 관리 사용 (Context, Redux, Zustand 등)
상태가 얽히기 시작하면 컴포넌트 구조 + 상태 흐름을 함께 설계해야 해요.
📚 6. 참고 리소스
📝 마무리
React에서 컴포넌트 구조를 잘 잡는 건 유지보수와 협업에 큰 차이를 만들어냅니다.
지금은 하나의 버튼을 만들더라도, 나중엔 여러 화면과 기능을 유기적으로 구성하는 프로젝트를 만들게 될 거예요.
처음엔 단순하게,
하지만 원칙을 가지고 구조를 설계해보세요!
다음 글에서는 props와 state를 실제로 어떻게 활용하는지에 대해 더 깊게 들어가볼게요! 😄
반응형