React FSD 2회차: FSD의 Layer와 Slice 구성

React FSD 1회차

2회차: FSD의 Layer와 Slice 구성

목표
FSD의 Layer와 Slice를 구성하고, 각 레이어의 역할을 이해합니다.

---

FSD의 Layer 구성

FSD는 각 레이어를 통해 프로젝트를 구조화하며, 각 레이어는 서로 명확한 역할과 책임을 가집니다. 상위 레이어는 하위 레이어에 의존할 수 있지만, 하위 레이어는 상위 레이어에 의존하지 않는 방식으로 설계됩니다.

주요 레이어 설명

1. app: 애플리케이션의 진입점으로, 전역 설정이나 초기화 코드가 위치합니다.
2. processes: 페이지나 여러 컴포넌트에서 공통으로 사용하는 비즈니스 로직을 포함하는 레이어입니다.
3. pages: 페이지 단위로 구성된 컴포넌트들이 위치하는 레이어입니다.
4. widgets: 헤더, 풋터 등 재사용이 가능한 UI 컴포넌트를 포함하는 레이어입니다.
5. features: 개별 기능을 다루는 레이어입니다. 예를 들어, 로그인 기능, 팔로우 기능 등을 여기에서 관리합니다.
6. entities: 도메인 개체와 관련된 코드를 포함하는 레이어입니다. 사용자, 게시물, 댓글 등이 포함될 수 있습니다.
7. shared: 애플리케이션 전반에 걸쳐 사용되는 유틸리티 함수나 공통 컴포넌트들이 위치합니다.

---

Slice 구성

각 레이어 내에서 더 세분화하여 슬라이스를 구성할 수 있습니다. 슬라이스는 하나의 기능 또는 도메인 단위를 의미하며, 독립적으로 관리되는 작은 모듈입니다.

예를 들어:

• features/user: 사용자 기능과 관련된 코드가 위치합니다.
• features/post: 게시물 기능과 관련된 코드가 위치합니다.

---

실습: Layer와 Slice 구성하기

이제 실제 프로젝트에 FSD의 Layer와 Slice를 구성해보겠습니다.

Step 1: 프로젝트 생성

이전 실습에서 생성한 프로젝트를 사용하거나, 다음과 같은 명령어로 새로 프로젝트를 생성합니다.

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

 

생성한 프로젝트 디렉터리로 이동합니다.

cd fsd-example

 

Step 2: Layer 폴더 구조 생성

src 폴더 내에 FSD 구조에 맞게 레이어 폴더를 생성합니다.

fsd-example/
├── src/
│   ├── app/
│   ├── processes/
│   ├── pages/
│   ├── widgets/
│   ├── features/
│   ├── entities/
│   └── shared/
└── ...

Step 3: features Layer 내 Slice 폴더 생성

이번에는 features 폴더 내에 기능별 슬라이스를 구성합니다. 예시로 user와 post 슬라이스를 생성해 보겠습니다.

fsd-example/
├── src/
│   ├── features/
│   │   ├── user/
│   │   │   ├── api/
│   │   │   ├── ui/
│   │   │   ├── model/
│   │   │   ├── lib/
│   │   │   └── consts/
│   │   ├── post/
│   │   │   ├── api/
│   │   │   ├── ui/
│   │   │   ├── model/
│   │   │   ├── lib/
│   │   │   └── consts/

 

각 슬라이스에는 세그먼트 폴더(api, ui, model, lib, consts)를 생성하여 코드의 역할을 세분화할 수 있습니다.

Step 4: 파일 생성 및 기본 코드 작성

• features/user/ui/UserProfile.tsx
  사용자 프로필을 표시하는 기본 컴포넌트를 작성합니다.

  // src/features/user/ui/UserProfile.tsx
  import React from 'react';
  
  const UserProfile = () => {
    return (
      <div>
        <h2>User Profile</h2>
        <p>This is a simple user profile component.</p>
      </div>
    );
  };
  
  export default UserProfile;

 

• features/user/model/useUser.ts

  // src/features/user/model/useUser.ts
  import { useState } from 'react';
  
  export const useUser = () => {
    const [user, setUser] = useState({ name: 'John Doe', age: 30 });
  
    return {
      user,
      setUser,
    };
  };

  
  사용자 데이터를 관리하는 훅을 작성합니다.

 

• features/post/ui/PostList.tsx
  게시물 목록을 표시하는 기본 컴포넌트를 작성합니다.

  // src/features/post/ui/PostList.tsx
  import React from 'react';
  
  const PostList = () => {
    return (
      <div>
        <h2>Post List</h2>
        <p>This is a simple post list component.</p>
      </div>
    );
  };
  
  export default PostList;

 

• features/post/model/usePosts.ts
  게시물 데이터를 관리하는 훅을 작성합니다.

  // src/features/post/model/usePosts.ts
  import { useState } from 'react';
  
  export const usePosts = () => {
    const [posts, setPosts] = useState([
      { id: 1, title: 'First Post', content: 'This is the first post.' },
      { id: 2, title: 'Second Post', content: 'This is the second post.' },
    ]);
  
    return {
      posts,
      setPosts,
    };
  };

 

Step 5: App 컴포넌트에 슬라이스 추가

위에서 생성한 UserProfile과 PostList 컴포넌트를 App에 추가하여 실행해보겠습니다.

• src/App.tsx

  import React from 'react';
  import UserProfile from './features/user/ui/UserProfile';
  import PostList from './features/post/ui/PostList';
  
  function App() {
    return (
      <div className="App">
        <UserProfile />
        <PostList />
      </div>
    );
  }
  
  export default App;

 

Step 6: 프로젝트 실행

npm start

 

브라우저에서 http://localhost:3000로 접속하여 UserProfile과 PostList 컴포넌트가 정상적으로 출력되는지 확인합니다.

실행결과

---

결과 확인

이제 FSD의 Layer와 Slice 구조가 적용된 React 프로젝트를 생성했습니다.

: FSD 개념 이해 및 프로젝트 설정