src/utils

• React 프로젝트에서 src/utils 폴더는 일반적으로 여러 컴포넌트에서 재사용되는 유틸리티 함수와 헬퍼 모듈을 저장하는 데 사용됩니다.

• 이러한 유틸리티는 코드가 반복되지 않도록 하고 코드베이스를 보다 체계적이고 유지 관리하기 쉽게 만드는 데 도움이 됩니다.

src/utils의 목적

• 재사용성: 애플리케이션의 여러 부분에서 사용되는 함수 및 모듈.

• 관심사 분리: 유틸리티 함수를 컴포넌트 로직과 분리하면 코드를 더 쉽게 관리하고 이해할 수 있습니다.

• 테스트 가능성: 유틸리티는 따로 분리하여 테스트하기가 더 쉽습니다.

일반적인 유틸리티 유형

다음은 src/utils 폴더에서 찾을 수 있는 몇 가지 일반적인 유틸리티 함수 유형입니다:

• 서식 지정 함수: 날짜, 숫자, 문자열 등의 서식을 지정하는 함수입니다.

• API 헬퍼: API 호출, 헤더 관리 또는 응답 구문 분석을 위한 함수입니다.

• 유효성 검사 함수: 사용자 입력 또는 양식 데이터의 유효성을 검사하는 함수입니다.

• 데이터 변환: 컴포넌트에서 사용되기 전에 데이터를 변환하거나 조작하는 함수.

• 기타 헬퍼: 공통 기능을 제공하는 기타 함수.

폴더 구조 예시

src/
|-- utils/
|   |-- api.js
|   |-- format.js
|   |-- validate.js
|   |-- dataTransform.js
|   |-- constants.js

Example Utilities

1. API Helper (api.js):

   // src/utils/api.js
   
   export const fetchData = async (url, options = {}) => {
     try {
       const response = await fetch(url, options);
       if (!response.ok) {
         throw new Error(`HTTP error! status: ${response.status}`);
       }
       return await response.json();
     } catch (error) {
       console.error('Fetch error:', error);
       throw error;
     }
   };

2. Formatting Function (format.js):

   // src/utils/format.js
   
   export const formatDate = (date, locale = 'en-US') => {
     return new Date(date).toLocaleDateString(locale, {
       year: 'numeric',
       month: 'long',
       day: 'numeric',
     });
   };

3. Validation Function (validate.js):

   // src/utils/validate.js
   
   export const isEmailValid = (email) => {
     const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
     return emailRegex.test(email);
   };

4. Data Transformation (dataTransform.js):

   // src/utils/dataTransform.js
   
   export const transformUserData = (userData) => {
     return {
       id: userData.id,
       fullName: `${userData.firstName} ${userData.lastName}`,
       email: userData.email,
       address: `${userData.address.street}, ${userData.address.city}, ${userData.address.state} ${userData.address.zipCode}`,
     };
   };

5. Constants (constants.js):

   // src/utils/constants.js
   
   export const API_BASE_URL = 'https://api.example.com';
   export const DEFAULT_LANGUAGE = 'en-US';

6. Importing and Using Utilities

   // src/components/UserProfile.js
   
   import React, { useEffect, useState } from 'react';
   import { fetchData } from '../utils/api';
   import { formatDate } from '../utils/format';
   import { isEmailValid } from '../utils/validate';
   
   const UserProfile = () => {
     const [user, setUser] = useState(null);
   
     useEffect(() => {
       const getUserData = async () => {
         const data = await fetchData('https://api.example.com/user/1');
         setUser(data);
       };
       getUserData();
     }, []);
   
     if (!user) return <div>Loading...</div>;
   
     return (
       <div>
         <h1>{user.name}</h1>
         <p>Email: {isEmailValid(user.email) ? user.email : 'Invalid email'}</p>
         <p>Joined: {formatDate(user.joinedDate)}</p>
       </div>
     );
   };
   
   export default UserProfile;