Reactコンポーネントの設計原則とパターンで品質を高める - Reactを理解して使う9日目
📅
function UserProfileWithPosts({ userId }: { userId: string }) {
const [user, setUser] = React.useState(null);
const [posts, setPosts] = React.useState([]);
const [loading, setLoading] = React.useState(false);
React.useEffect(() => {
// 데이터 fetching 책임
setLoading(true);
Promise.all([fetchUser(userId), fetchPosts(userId)])
.then(([userData, postData]) => {
setUser(userData);
setPosts(postData);
})
.finally(() => setLoading(false));
}, [userId]);
// UI 렌더링 책임 (사용자 정보 + 게시글 목록)
if (loading) return <div>로딩 중...</div>;
if (!user) return <div>사용자 정보 없음</div>;
return (
<div>
{/* 사용자 정보 렌더링 부분 */}
<h2>{user.name}</h2>
<p>{user.email}</p>
<hr />
{/* 게시글 목록 렌더링 부분 */}
<h3>게시글</h3>
<ul>
{posts.map(post => <li key={post.id}>{post.title}</li>)}
</ul>
</div>
);
}// 데이터 fetching 로직 분리 (커스텀 훅)
function useUserData(userId: string) { /* ... user fetching 로직 ... */ return { user, loadingUser }; }
function usePostData(userId: string) { /* ... posts fetching 로직 ... */ return { posts, loadingPosts }; }
// UI 컴포넌트 분리
function UserInfo({ user }: { user: any }) { /* ... 사용자 정보 UI ... */ }
function PostList({ posts }: { posts: any[] }) { /* ... 게시글 목록 UI ... */ }
// 각 책임을 조합하는 상위 컴포넌트
function UserProfilePage({ userId }: { userId: string }) {
const { user, loadingUser } = useUserData(userId);
const { posts, loadingPosts } = usePostData(userId);
if (loadingUser || loadingPosts) return <div>로딩 중...</div>;
if (!user) return <div>사용자 정보 없음</div>;
return (
<div>
<UserInfo user={user} />
<hr />
<PostList posts={posts} />
</div>
);
}
Q: 「単一責任の原則（SRP）とは何ですか？Reactコンポーネントにはどう適用できますか？」 A: 「1つのコンポーネントは1つの責任だけを持つべきだという原則です。ロジックをカスタムフックに、UIを小さなコンポーネントに分けて適用でき、テストのしやすさと再利用性が向上します。」
import React from 'react';
// --- Presentational Component ---
interface TodoListProps {
todos: { id: number; text: string; completed: boolean }[];
onToggleTodo: (id: number) => void;
}
// 오직 props를 받아 UI를 그리는 역할만 수행
function TodoListUI({ todos, onToggleTodo }: TodoListProps) {
return (
<ul>
{todos.map(todo => (
<li
key={todo.id}
onClick={() => onToggleTodo(todo.id)}
style={{ textDecoration: todo.completed ? 'line-through' : 'none', cursor: 'pointer' }}
>
{todo.text}
</li>
))}
</ul>
);
}// --- Container Component ---
import { useTodos } from './hooks/useTodos'; // 가상의 커스텀 훅 (데이터 로직 분리)
function TodoListContainer() {
// 데이터 fetching 및 상태 관리 로직은 커스텀 훅 또는 여기서 직접 처리
const { todos, toggleTodo } = useTodos(); // 가상의 훅 사용 예시
// Presentational 컴포넌트에 필요한 데이터와 콜백 전달
return <TodoListUI todos={todos} onToggleTodo={toggleTodo} />;
}// --- 가상의 커스텀 훅 예시 ---
// hooks/useTodos.ts (가상 예시)
function useTodos() {
const [todos, setTodos] = React.useState([]);
// ... 데이터 fetching 로직 ...
const toggleTodo = (id: number) => { /* ... 상태 업데이트 로직 ... */ };
return { todos, toggleTodo };
}
Q: 「Container/Presentationalパターンとは何ですか？Hooksの登場後はどう変わりましたか？」 A: 「ロジック（Container）とビュー（Presentational）を分けるパターンです。Hooksの登場後はロジックをカスタムフックに分ける傾向がありますが、関心の分離という基本的な考え方は今も有効です。純粋なUIコンポーネントを書くことは、再利用性やテストのしやすさにつながります。」
isEnabled と flag の比較です。children propを積極的に使います。カードのレイアウト内にさまざまな内容を入れるなど、コンポーネントの再利用性が大きく向上します。
function Card({ children, title }: { children: React.ReactNode; title: string }) {
return <div className="card"><h2>{title}</h2>{children}</div>;
}
// <Card title="제목"><p>내용</p></Card>次回は、マイクロサービスアーキテクチャのフロントエンド版である*マイクロフロントエンド（Micro Frontend）*を学びます。 大規模なフロントエンドアプリケーションを、複数のチームが独立して開発、デプロイする方法を見ていきましょう。