React/FSD

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

atomicdev 2024. 11. 12. 11:02
728x90

3회차: Segment를 통한 코드 세분화

목표
Segment를 활용하여 코드를 세분화하고, 각 세그먼트의 역할을 이해합니다.

Segment 구성

FSD의 Segment는 각 슬라이스 내부에서 코드를 더욱 체계적으로 관리하기 위해 나누어집니다. 주로 ui, model, api, lib, consts로 구성됩니다. 이 구성은 각 기능 모듈의 역할을 명확히 하여 코드의 가독성과 유지보수성을 높입니다.

각 Segment의 역할

  • ui: 사용자 인터페이스 컴포넌트를 포함합니다.
  • model: 상태 관리 및 비즈니스 로직을 담당합니다.
  • api: API 호출을 담당하는 함수들을 포함합니다.
  • lib: 공통 라이브러리나 유틸리티 함수를 정의합니다.
  • consts: 상수 값을 정의하여 코드의 가독성과 재사용성을 높입니다.

실습: features/user 슬라이스 내 Segment 생성 및 예시 코드 작성

Step 1: 프로젝트 설정

이전 회차에서 생성한 fsd-example 프로젝트를 사용하거나, 다음 명령어로 새 프로젝트를 생성합니다.

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

Step 2: features/user 슬라이스에 Segment 폴더 생성

features/user 슬라이스 내에 다음과 같은 Segment 폴더들을 생성합니다.

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

Step 3: 각 Segment에 예시 코드 작성

각 Segment의 역할에 맞게 파일을 생성하고 예시 코드를 작성합니다.

  1. ui/UserProfile.tsx
    사용자 프로필 UI 컴포넌트입니다. 
    // src/features/user/ui/UserProfile.tsx
import React from 'react';
import { useUser } from '../model/useUser';

const UserProfile = () => {
  const { user } = useUser();

  return (
    <div>
      <h2>User Profile</h2>
      <p>Name: {user.name}</p>
      <p>Age: {user.age}</p>
    </div>
  );
};

export default UserProfile;
  2. model/useUser.ts
    사용자 상태 관리 로직입니다. 
    // src/features/user/model/useUser.ts
import { useState } from 'react';
import { User } from '../consts/userTypes';

export const useUser = () => {
  const [user, setUser] = useState<User>({ name: 'John Doe', age: 30 });

  return {
    user,
    setUser,
  };
};
  3. api/userApi.ts
    사용자 관련 API 호출 함수입니다. 여기서는 예시로 사용자 데이터를 가져오는 함수만 작성했습니다. 
    // src/features/user/api/userApi.ts
import { User } from '../consts/userTypes';

export const fetchUserData = async (): Promise<User> => {
  // 예시로 실제 API 호출을 생략하고, mock 데이터를 반환합니다.
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve({ name: 'Jane Doe', age: 28 });
    }, 1000);
  });
};
  4. lib/userUtils.ts
    사용자와 관련된 유틸리티 함수를 정의합니다. 
    // src/features/user/lib/userUtils.ts
import { User } from '../consts/userTypes';

export const getUserGreeting = (user: User): string => {
  return `Hello, ${user.name}! You are ${user.age} years old.`;
};
  5. consts/userTypes.ts
    사용자와 관련된 타입 및 상수를 정의합니다. 
    // src/features/user/consts/userTypes.ts
export interface User {
  name: string;
  age: number;
}

Step 4: App 컴포넌트에서 UserProfile 컴포넌트 사용

이제 UserProfile 컴포넌트를 App 컴포넌트에 추가하여 실행해 보겠습니다.

  • src/App.tsx 
    import React, { useEffect } from 'react';
import UserProfile from './features/user/ui/UserProfile';
import { fetchUserData } from './features/user/api/userApi';
import { useUser } from './features/user/model/useUser';
import { getUserGreeting } from './features/user/lib/userUtils';

const App = () => {
  const { user, setUser } = useUser();

  useEffect(() => {
    const fetchData = async () => {
      const userData = await fetchUserData();
      setUser(userData);
    };

    fetchData();
  }, [setUser]);

  return (
    <div className="App">
      <UserProfile />
      <p>{getUserGreeting(user)}</p>
    </div>
  );
};

export default App;

Step 5: 프로젝트 실행

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

npm start
실행결과

결과 확인

브라우저 화면에 사용자 정보와 환영 메시지가 출력되면 성공적으로 세그먼트별 코드 구성을 완료한 것입니다.

728x90