React 컴포넌트 분리 및 재사용

컴포넌트 분리 및 재사용

React 앱을 개발하면서 가장 중요한 개념 중 하나는 "컴포넌트 분리"와 "재사용성"입니다.
이 강좌에서는 반복되는 UI를 효과적으로 분리하고 관리하는 방법을 알아봅니다.

1. 왜 컴포넌트를 분리해야 하나요?

컴포넌트를 잘게 나누면 다음과 같은 장점이 있습니다:

• 재사용성 증가
• 유지보수가 쉬움
• UI 구조가 명확해짐

💡 Tip: 하나의 컴포넌트는 하나의 역할만 담당하도록 작게 쪼개는 것이 이상적입니다.

2. 컴포넌트 분리 예제

간단한 사용자 카드 목록을 출력하는 예제를 통해 컴포넌트를 나눠봅시다.

// App.jsx import React from 'react'; import UserList from './UserList'; function App() { const users = [ { id: 1, name: '홍길동', email: 'hong@example.com' }, { id: 2, name: '김철수', email: 'kim@example.com' }, ]; return ( <div> <h1>사용자 목록</h1> <UserList users={users} /> </div> ); } export default App;

// UserList.jsx import React from 'react'; import UserCard from './UserCard'; function UserList({ users }) { return ( <div> {users.map(user => ( <UserCard key={user.id} user={user} /> ))} </div> ); } export default UserList;

// UserCard.jsx import React from 'react'; function UserCard({ user }) { return ( <div style={{ border: '1px solid #ccc', margin: '10px 0', padding: '10px', borderRadius: '8px' }}> <h3>{user.name}</h3> <p>Email: {user.email}</p> </div> ); } export default UserCard;

3. 분리된 컴포넌트의 이점

UserCard 컴포넌트는 다른 목록이나 프로필 화면에서도 그대로 재사용할 수 있습니다. 이는 코드 중복을 줄이고, 변경 시 하나만 수정하면 되는 구조를 만들어줍니다.

4. props를 통한 유연한 구성

컴포넌트는 props를 통해 데이터를 전달받습니다. 이렇게 하면 다양한 데이터를 처리하면서도 동일한 컴포넌트를 재사용할 수 있습니다.

💡 유지보수 팁: 반복되는 HTML을 보면 컴포넌트로 분리할 수 있는 신호입니다!

5. 결론

React 개발의 핵심은 컴포넌트를 잘 분리하고 재사용하는 것입니다.
UI가 복잡해질수록 컴포넌트를 계층적으로 구조화하는 습관을 들이세요.

앞으로 다양한 실전 프로젝트에서 이 원칙을 적용하면서 보다 효율적이고 깔끔한 코드를 작성할 수 있게 될 것입니다. 😊