React 프로젝트 구조 정리 | src, public, components 폴더 역할 쉽게 이해하기

React를 처음 시작하면 프로젝트를 만든 직후부터 바로 헷갈리는 부분이 있습니다. 바로 폴더 구조입니다.

특히 입문자 입장에서는 아래 질문이 자주 나옵니다.

• `src` 폴더에는 무엇을 넣는가?
• `public` 폴더는 언제 사용하는가?
• `components` 폴더는 왜 따로 나누는가?
• 파일을 아무 데나 두면 안 되는 이유는 무엇인가?

이번 글에서는 React 입문자가 가장 먼저 이해해야 하는 src, public, components 폴더 역할을 한 번에 정리해보겠습니다. 단순히 폴더 이름만 설명하는 것이 아니라, 왜 그렇게 나누는지, 실제로 어떻게 관리하는지까지 함께 보겠습니다.

핵심만 먼저 보면

src는 실제 React 코드가 들어가는 핵심 폴더입니다.

public은 정적 파일을 그대로 제공할 때 사용하는 영역입니다.

components는 재사용 가능한 UI 조각을 모아두는 폴더입니다.

728x90

React 프로젝트 구조를 왜 알아야 할까?

폴더 구조를 이해해야 파일이 늘어나도 덜 헤맵니다.

React 프로젝트는 처음에는 파일 수가 많지 않아 보여도, 기능이 늘어나기 시작하면 빠르게 복잡해집니다.

예를 들어:

• 버튼 컴포넌트
• 게시글 목록 컴포넌트
• 페이지별 화면
• 이미지
• 스타일 파일
• API 호출 코드

이런 것들이 뒤섞이면 작은 프로젝트도 관리가 어려워집니다. 그래서 React는 보통 역할별로 파일과 폴더를 나누는 방식으로 구조를 잡습니다.

React 프로젝트 구조를 이해한다는 것은 단순히 폴더 이름을 외우는 것이 아니라, 어떤 파일을 어디에 두어야 나중에 유지보수가 쉬운지를 이해하는 것입니다.

기본적인 React 폴더 구조는 어떻게 생겼을까?

먼저 전체 그림을 보면 각 폴더 역할이 더 쉽게 들어옵니다.

my-react-app/
├─ public/
├─ src/
│  ├─ assets/
│  ├─ components/
│  ├─ pages/
│  ├─ App.jsx
│  └─ main.jsx
├─ package.json
└─ vite.config.js

프로젝트마다 세부 구조는 다를 수 있지만, 입문 단계에서는 보통 위 흐름을 기준으로 이해하면 충분합니다.

폴더/파일	역할
src	React 앱의 실제 코드가 들어가는 핵심 영역
public	정적 파일을 그대로 제공하는 영역
components	재사용 가능한 UI 컴포넌트를 모아두는 폴더
App.jsx	앱의 메인 화면 구조를 구성하는 파일
main.jsx	React 앱을 실제 브라우저에 연결하는 시작점

src 폴더는 어떤 역할을 할까?

React 프로젝트에서 가장 중요한 폴더입니다.

src는 보통 실제 개발자가 가장 자주 작업하는 공간입니다.

이 안에는 보통 아래 같은 것들이 들어갑니다.

• 컴포넌트 파일
• 페이지 파일
• 스타일 파일
• 이미지/아이콘
• API 호출 코드
• 상태 관리 관련 코드

쉽게 말하면:

`src`는 React 앱의 실제 소스코드가 모여 있는 곳입니다.

즉 화면을 만들고, 기능을 붙이고, 컴포넌트를 조합하는 대부분의 작업은 src 안에서 일어납니다.

public 폴더는 언제 사용할까?

`src`와 헷갈리기 쉬운 대표 영역입니다.

public은 정적 파일을 그대로 제공할 때 사용하는 폴더입니다.

예를 들면:

• favicon
• 외부에서 직접 접근할 이미지
• 빌드 과정에서 import 없이 그대로 써야 하는 파일

입문자 기준으로는 이렇게 구분하면 쉽습니다.

구분	설명
src 안 파일	보통 import 해서 React 코드 안에서 사용하는 자원
public 안 파일	정적 경로로 직접 접근하거나 그대로 제공할 자원

즉, 일반적인 프로젝트에서는 이미지도 src/assets에서 관리하는 경우가 많고, 정말 정적으로 둘 필요가 있을 때만 public을 쓰는 편이 자연스럽습니다.

헷갈리지 않게 기억하기

특별한 이유가 없다면 파일을 무조건 `public`에 넣기보다, React 코드와 함께 관리할 자원은 `src` 안에서 관리하는 쪽이 보통 더 깔끔합니다.

components 폴더는 왜 따로 나눌까?

React 구조에서 가장 많이 쓰이는 분리 기준입니다.

components 폴더는 재사용 가능한 UI 조각을 모아두는 공간입니다.

예를 들면:

• Button
• Header
• Footer
• Card
• Modal
• Input

이걸 따로 빼두는 이유는 명확합니다.

• 여러 화면에서 재사용하기 쉽고
• 중복 코드를 줄일 수 있으며
• UI 구조를 더 깔끔하게 관리할 수 있기 때문입니다.

예를 들어 버튼을 페이지마다 직접 만들지 않고, components/Button.jsx로 만들어두면 필요한 곳에서 가져와 쓸 수 있습니다.

function Button({ children }) {
  return <button>{children}</button>;
}

export default Button;

이렇게 해두면 화면마다 같은 버튼 구조를 반복하지 않아도 됩니다.

실제로는 어떤 식으로 폴더를 나누면 좋을까?

입문자도 무리 없이 따라갈 수 있는 기본 구조 예시입니다.

src/
├─ assets/
├─ components/
│  ├─ Button.jsx
│  ├─ Header.jsx
│  └─ Card.jsx
├─ pages/
│  ├─ Home.jsx
│  └─ About.jsx
├─ App.jsx
└─ main.jsx

이 정도만 나눠도 프로젝트 구조가 훨씬 보기 쉬워집니다.

폴더	이렇게 쓰면 좋다
assets	이미지, 아이콘, 폰트 같은 정적 자원 관리
components	재사용 가능한 UI 컴포넌트 관리
pages	라우팅 단위가 되는 화면 페이지 관리

자주 하는 실수

모든 파일을 `src` 바로 아래에만 두기 시작하면, 처음엔 편해 보여도 파일 수가 늘어날수록 구조가 금방 지저분해집니다.

입문 단계부터라도 components, pages, assets 정도는 구분하는 습관이 좋습니다.

빠른 체크리스트

• src = 실제 React 코드 중심인지 확인
• public = 정말 정적으로 둘 파일만 넣었는지 확인
• components = 재사용 UI를 따로 분리했는지 확인
• pages = 화면 단위 파일을 구분했는지 확인
• 파일 위치만 봐도 역할이 보이는 구조인지 확인

실무 관점에서 보면 어떤 기준이 중요할까?

결국 핵심은 폴더 이름보다 역할 분리가 잘 되는지입니다.

실무에서는 프로젝트마다 구조가 조금씩 다를 수 있습니다. 하지만 공통적으로 중요한 기준은 아래입니다.

• 재사용 가능한 것과 페이지 전용 코드를 분리할 것
• 정적 파일과 React 코드 자산을 구분할 것
• 파일 위치만 봐도 역할이 어느 정도 보이게 할 것

즉, 정답은 한 가지가 아니지만 읽는 사람이 이해하기 쉬운 구조가 좋은 구조입니다.

마무리 정리

React 프로젝트 구조를 이해할 때는 폴더 이름만 외우기보다, 어떤 역할 때문에 나누는지를 같이 이해하는 것이 중요합니다.

src = 실제 React 코드 중심

public = 정적 파일 직접 제공

components = 재사용 UI 컴포넌트 관리

핵심 = 구조는 정답보다 역할 분리가 중요

React 프로젝트 구조를 이해하면 파일이 늘어나도 덜 헤매고, 이후 컴포넌트 설계와 페이지 분리도 훨씬 쉬워집니다.

�.

React 프로젝트 구조를 이해하면 파일이 늘어나도 덜 헤매고, 이후 컴포넌트 설계와 페이지 분리도 훨씬 쉬워집니다.

다음으로 같이 보면 좋은 React 글

• React란 무엇인가? 특징, 장점, 사용하는 이유까지 쉽게 정리
• React 설치 및 개발환경 세팅 방법 | Node.js 설치부터 프로젝트 생성까지
• React JSX 문법 정리 | 기본 문법, 조건부 렌더링, 리스트 렌더링까지
• React Router 사용법 | 페이지 이동, Link, 기본 라우팅 적용 방법