React 폴더 구조에 대해서

Jaemin Jung·2022년 1월 23일

React

목록 보기

4/10

React의 폴더 구조

큰 규모의 리액트앱은 각 컴포넌트가 폴더와 파일로 분류되어야 한다.
이 주제에 대해서 정답은 없지만은 참조 가이드를 참고하여 내가 앞으로 알고 있어야할 규칙을 정리해보려 한다.

단일 React 파일

리액트에서는 하나의 파일로 모두를 규정짓는다.
리액트 프로젝트를 첫 시작하는 create-react-app을 시작할 때,
src폴더와 App 컴포넌트가 있는 형태로 시작된다.

import React from 'react'; 
const App = () => { 
  const title = 'React'; 
  return ( 
    <div>
      <h1>Hello {title}</h1> 
    </div> 
  ); 
} 
export default App;

이 컴포넌트엣거 더 많은 기능을 추가하고 자연스럽게 사이즈가 커지게 되며,
일부를 독립된 리액트 컴포넌트로 추출해내야 한다.

한 파일에 여러 컴포넌트를 포함시켜도 되지만,
큰 규모의 프로젝트에서 한 컴포넌트가 다른 컴포넌트와 연결관계가 있다면,
각각 독립적으로 파일을 분류해놓는게 유지 보수에 좋다.

기능에 문제 없지만 유지 보수가 어려운 예시

import React from 'react';
const list = [ 
  { id: 'a',
   firstname: 'Robin',
   lastname: 'Wieruch',
   year: 1988,
  }, 
  { id: 'b',
   firstname: 'Dave',
   lastname: 'Davidds',
   year: 1990,
  }, 
]; 

const App = () => <List list={list} />; 
const List = ({ list }) => (
  <ul> {list.map(item => (
      <ListItem key={item.id} item={item} />
    ))}
  </ul>
); 

const ListItem = ({ item }) => ( 
  <li>
    <div>{item.id}</div>
    <div>{item.firstname}</div>
    <div>{item.lastname}</div>
    <div>{item.year}</div>
  </li> 
);

여러 리액트 파일

앞서 예시의 형태를 각각 독립적인 컴포넌트로 분류 해줘야한다.
코드의 재사용성과 가독성을 올리려면 관심사의 분리가 필요하다.
프로그래밍에서 관심사의 분리란 복잡한 코드를 비슷한 기능을 하는 코드끼리 별도로 관리를 하는 것을 말한다.
하나의 컴포넌트에서 모든 기능을 구현할 수 없기 때문에, 여러 개의 컴포넌트를 만들어서 조립하는 느낌이다.
App 컴포넌트와 List 컴포넌트를 각각 파일로 분류해준다.

- src/
--- App.js
--- List.js

src/List.js는 ListItem 컴포넌트의 구현을 가지고 있지만, 이 또 한 앞선 예시와 같은 맥락이기에 분류해준다.
이는 유지 보수의 편리함 때문이기도 하지만, 하나의 컴포넌트의 재사용성을 위해서도 필요하다.
분류하였을때에는 공용 API로 import, export를 사용해 필요한 컴포넌트에서 불러온다.
List.js에서 ListItem 컴포넌트를 import해와 사용할 수 있다.

- src/
--- App.js
--- List.js
--- ListItem.js


// List.js
import ListItem from './ListItem'

const List = ({ list }) => ( 
  <ul> {list.map(item => (
      <ListItem key={item.id} item={item} />
    ))}
  </ul> 
); 

export default List;

...

// ListItem.js

const ListItem = ({ item }) => ( 
  <li> 
    <div>{item.id}</div>
    <div>{item.firstname}</div>
    <div>{item.lastname}</div>
    <div>{item.year}</div> 
  </li> 
); 

export default ListItem;

리액트 파일에서 폴더로

하나의 폴더 안에 모든 컴포넌트를 만들어서 관리를 하면 시간이 흐를수록 컴포넌트가 많아져서
원하는 컴포넌트를 찾기가 힘들어질 것이다.
그래서 연관된 컴포넌트끼리 폴더를 만들어서 관리는 것이 컴포넌트를 찾기에 수월하다.
앞선 예시에서 사용하는 List와 ListItem 컴포넌트는 서로 긴밀히 묶여있는 컴포넌트들이다.
각각 파일로 분류했지만, 각각 css파일이나 styled-components를 사용한다면 style.js파일이 필요할것이다.
이런 경우 하나의 폴더로 해당 컴포넌트들을 묶어준다.
각각 파일와 폴더의 네이밍은 개발자의 몫이다.
보통 명시적으로 기술적인 부분에 대한 명사를 사용한다.

- src/
  --- App/
  ----- index.js
  ----- style.css
  --- List/
  ----- index.js
  ----- ListItem.js
  ----- style.css

좀 더 명확한 구분을 위해서 ListItem 폴더를 만들어 ListItem.js 를 관리할 수 있다.

중요한 점은 여기부터 컴포넌트가 서로 너무 깊게 중첩되지 않도록 신경 써야 합니다. 제 경험에 따라 저는 컴포넌트가 두 레벨 이상 중첩되지 않도록 합니다. 따라서 List 폴더 내 ListItem 폴더는 괜찮지만 ListItem 폴더에 다른 중첩된 폴더가 있어서는 안 됩니다.

출처: https://smoh.tistory.com/385 [Simple is Beautiful.]

뭐.. 그렇다고 한다.
이 부분은 아직 나도 경험 해보질 않아서 잘 와닿지 않는다.
하지만 말 그대로 중첩 폴더가 2레벨 이상의 Deepth가 있다면, 조금 불편할거 같긴 하다.
애초에 나도 하나의 주제를 가진 컴포넌트에 여러 Js파일을 생성하고 필요에따라 폴더를 더 생성하긴 했지만,
큰 규모의 프로젝트는 경험하지 못해서 확실하게는 모르겠다.