0Pricing
React Academy · 강의

폴더 구조 및 이름 지정 규칙

기능별 폴더와 명확한 파일 이름으로 React 프로젝트를 구성합니다.

폴더 구조 및 이름 지정 규칙은(는) CoddyKit의 무료 React Academy 강의입니다. 이것은 4개 중 4번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 React Academy 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. React Academy 강의에는 총 4개의 강의가 포함되어 있습니다.

환영합니다

이 레슨에서는 React 프로젝트에서 자주 사용하는 폴더 구조를 살펴보고, 파일과 컴포넌트의 이름 지정 규칙을 배우며, 프로젝트가 성장함에 따라 코드를 구성하는 방법을 이해합니다.

기본 구조

최소한의 Vite + React 프로젝트에는 `src/App.jsx`와 `src/main.jsx`가 있습니다. 작은 데모에는 문제가 없지만 규모가 커지면 관리하기 어렵습니다. 기능을 추가할 때는 관련 코드를 함께 관리할 수 있도록 전용 폴더를 만드십시오.
src/
  main.jsx
  App.jsx
  index.css

기능 기반 구조

유형이 아니라 기능을 기준으로 파일을 그룹화하십시오. 각 기능 폴더에는 해당 기능의 컴포넌트, 스타일, 테스트, 도우미 함수가 들어 있습니다. 이렇게 하면 기능 전체를 한 번에 쉽게 추가하거나 삭제할 수 있습니다.
src/
  features/
    auth/
      LoginForm.jsx
      LoginForm.test.jsx
      useLogin.js
    dashboard/
      Dashboard.jsx
      useDashboardData.js
  components/     <- shared UI only
  hooks/          <- shared hooks
  lib/            <- utilities

컴포넌트 파일 이름 지정

컴포넌트 파일 이름은 컴포넌트 이름과 일치하는 **PascalCase**로 지정하십시오: `UserCard.jsx`, `NavigationBar.jsx`. 파일 하나에 컴포넌트 하나를 두는 것이 일반적입니다. `.jsx`(또는 `.tsx`)를 사용하면 편집기에서 해당 파일에 JSX가 포함되어 있음을 알 수 있습니다.

컴포넌트가 아닌 파일 이름 지정

훅, 유틸리티, 상수에는 **camelCase**를 사용하십시오: `useAuth.js`, `formatDate.js`, `apiClient.js`. 테스트 파일은 `.test` 또는 `.spec`을 사용하여 원본 파일 이름을 따릅니다: `useAuth.test.js`.

깔끔한 가져오기를 위한 인덱스 파일

폴더에 `index.js`를 추가하면 전체 파일 경로 대신 폴더 경로에서 가져올 수 있습니다. 인덱스 파일에는 다시 내보내기만 작성하고 로직은 넣지 마십시오.
// src/features/auth/index.js
export { LoginForm } from './LoginForm';
export { useLogin } from './useLogin';

// Consumer
import { LoginForm } from '@/features/auth';

경로 별칭을 사용한 절대 경로 가져오기

`vite.config.js`와 `tsconfig.json`에서 `src/`를 가리키는 `@/` 별칭을 구성하십시오. 이렇게 하면 `../../../../components/Button`처럼 변경에 취약한 상대 경로를 피할 수 있습니다.
// vite.config.js
resolve: {
  alias: { '@': path.resolve(__dirname, 'src') }
}

공유 컴포넌트와 기능 컴포넌트

하나의 기능에서만 사용하는 컴포넌트는 해당 기능의 폴더 안에 두십시오. 두 개 이상의 기능에서 필요할 때만 컴포넌트를 `src/components/`로 옮기십시오. 너무 일찍 분리하지 마십시오.

상수 및 설정 파일

매직 문자열, API 기본 URL, 환경 변수 래퍼는 `src/lib/constants.js` 또는 `src/config.js`에 저장하십시오. 여러 파일에 `process.env.VITE_API_URL` 문자열을 흩어 놓지 마십시오.
// src/config.js
export const API_BASE = import.meta.env.VITE_API_URL;

타입 및 인터페이스(TypeScript)

TypeScript 프로젝트에서는 타입을 사용하는 기능이나 컴포넌트와 같은 위치에 두십시오. 여러 기능에서 사용하는 공유 타입은 `src/types/`를 만들고 도메인 영역마다 파일 하나를 두십시오.

빠른 확인

유형 기반 구조에 비해 기능 기반 폴더 구조가 가지는 가장 큰 장점은 무엇입니까?

정리

기능 기반 폴더, 컴포넌트 파일의 PascalCase, 훅과 유틸리티의 camelCase, 깔끔한 가져오기를 위한 index.js 다시 내보내기, 긴 상대 경로를 없애는 @/와 같은 경로 별칭을 사용하십시오.

과정 완료

축하합니다! **React 엄격 모드 및 모범 사례**를 완료하셨습니다. 이제 StrictMode 동작, 순수 렌더링 함수를 작성하는 방법, 올바른 키와 ref 사용법, 확장 가능한 폴더 구조를 이해하셨습니다.

자주 묻는 질문

“폴더 구조 및 이름 지정 규칙” 강의는 무료인가요?

네 — “폴더 구조 및 이름 지정 규칙” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 React Academy 강의 전체를 잠금 해제할 수 있습니다. React Academy 강의에는 총 4개의 강의가 포함되어 있습니다.

“폴더 구조 및 이름 지정 규칙”에서 뭘 배우나요?

기능별 폴더와 명확한 파일 이름으로 React 프로젝트를 구성합니다. 브라우저에서 직접 실행하는 실습 코드로 React Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.

React Academy을(를) 시작하는 데 경험이 필요한가요?

사전 경험은 필요하지 않습니다. CoddyKit의 React Academy은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 4개 중 4번째 강의입니다.

“폴더 구조 및 이름 지정 규칙” 강의는 얼마나 걸리나요?

대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.

이 React Academy 강의에서 코드를 작성하고 실행할 수 있나요?

네. 모든 React Academy 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.

이 강의의 모든 강의

  1. StrictMode의 역할
  2. 순수 구성 요소 및 렌더링 부작용 피하기
  3. Key 및 Ref 모범 사례
  4. 폴더 구조 및 이름 지정 규칙
← React Academy(으)로 돌아가기