React FSD 4회차: FSD를 활용한 기능 개발

4회차: FSD를 활용한 기능 개발

목표
FSD 구조를 활용하여 실제 기능을 개발하고, 각 레이어, 슬라이스, 세그먼트 간의 상호작용을 이해합니다.

---

기능 개발 흐름

1. entities 레이어에서 도메인 모델을 정의합니다.
2. features 레이어에서 비즈니스 로직을 구현합니다.
3. widgets 레이어에서 UI 컴포넌트를 구성합니다.
4. pages 레이어에서 최종 페이지를 구성하여 완성합니다.

예시 기능

"사용자 목록을 불러와 화면에 표시하는 기능"을 구현하겠습니다.

---

실습: 사용자 목록 표시 기능 개발

Step 1: 프로젝트 설정

이전 실습에서 생성한 fsd-example 프로젝트를 사용하거나 새로 프로젝트를 생성해도 좋습니다.

npx create-react-app fsd-example --template typescript
cd fsd-example

 

Step 2: 엔티티 정의 (entities 레이어)

사용자 엔티티 모델을 정의하기 위해 entities/user 슬라이스를 생성하고, 사용자 타입을 설정합니다.

• src/entities/user/userTypes.ts

  export interface User {
    id: number;
    name: string;
    email: string;
  }

Step 3: 비즈니스 로직 구현 (features 레이어)

사용자 데이터를 불러오고 상태를 관리하는 로직을 구현합니다.

1. features/user/api/userApi.ts
   사용자 데이터를 불러오는 API 함수를 작성합니다. 실제 API 대신 mock 데이터를 반환하도록 설정합니다.

   import { User } from '../../../entities/user/userTypes';
   
   export const fetchUsers = async (): Promise<User[]> => {
     return new Promise((resolve) => {
       setTimeout(() => {
         resolve([
           { id: 1, name: 'Alice', email: 'alice@example.com' },
           { id: 2, name: 'Bob', email: 'bob@example.com' },
           { id: 3, name: 'Charlie', email: 'charlie@example.com' },
         ]);
       }, 1000);
     });
   };

2. features/user/model/useUsers.ts
   사용자 목록 상태를 관리하는 훅을 작성합니다.

   import { useState, useEffect } from 'react';
   import { User } from '../../../entities/user/userTypes';
   import { fetchUsers } from '../api/userApi';
   
   export const useUsers = () => {
     const [users, setUsers] = useState<User[]>([]);
     const [loading, setLoading] = useState<boolean>(true);
   
     useEffect(() => {
       const loadUsers = async () => {
         const data = await fetchUsers();
         setUsers(data);
         setLoading(false);
       };
       loadUsers();
     }, []);
   
     return { users, loading };
   };

Step 4: UI 컴포넌트 구성 (widgets 레이어)

사용자 목록을 보여주는 UI 컴포넌트를 작성합니다.

• widgets/UserList/UserList.tsx

  import React from 'react';
  import { User } from '../../entities/user/userTypes';
  
  interface UserListProps {
    users: User[];
  }
  
  const UserList: React.FC<UserListProps> = ({ users }) => {
    return (
      <div>
        <h3>User List</h3>
        <ul>
          {users.map((user) => (
            <li key={user.id}>
              <p>Name: {user.name}</p>
              <p>Email: {user.email}</p>
            </li>
          ))}
        </ul>
      </div>
    );
  };
  
  export default UserList;

Step 5: 페이지 구성 (pages 레이어)

전체 페이지를 구성하고 useUsers 훅을 사용해 사용자 데이터를 가져오며 UserList 컴포넌트를 렌더링합니다.

• pages/UserPage.tsx

  import React from 'react';
  import { useUsers } from '../features/user/model/useUsers';
  import UserList from '../widgets/UserList/UserList';
  
  const UserPage = () => {
    const { users, loading } = useUsers();
  
    if (loading) {
      return <p>Loading...</p>;
    }
  
    return (
      <div>
        <h2>Users</h2>
        <UserList users={users} />
      </div>
    );
  };
  
  export default UserPage;

Step 6: App 컴포넌트에서 페이지 렌더링

이제 App.tsx에서 UserPage를 불러와 화면에 표시합니다.

• src/App.tsx

  import React from 'react';
  import UserPage from './pages/UserPage';
  
  const App = () => {
    return (
      <div className="App">
        <UserPage />
      </div>
    );
  };
  
  export default App;

Step 7: 프로젝트 실행

다음 명령어로 프로젝트를 실행하여 브라우저에서 http://localhost:3000으로 접속해 결과를 확인합니다.

npm start

실행화면

---

결과 확인

브라우저에서 UserPage가 렌더링되고, 사용자 목록이 표시됩니다. 로딩 상태를 포함하여 사용자가 목록을 보기 전에 "Loading..." 텍스트가 잠깐 나타나는 것도 확인할 수 있습니다.