TIL#1 React 아토믹 디자인 시스템, 파일구조에 관하여

해커 뉴스 웹앱 프로젝트를 진행하면서 무언가 컴포넌트 파일들을 만들어내긴 하는데, 프로젝트가 어수선한 느낌이었다. 컴포넌트들을 만들어내면서도 어떤 기준으로 따로 빼내야 효율적인지도 잘 모르겠고, 직관적으로 프로젝트의 구조를 파악하기 어려웠다. 그리고 많은 단점들이 있겠지만 정말 정말로 가장 큰 최대 단점은 유지보수가 어렵다는 점이다. 일단 지금까지 리액트를 공부하기 위한 목적으로 만든 해커 뉴스 프로젝트를 어느 정도 만들어놨고, 리액트는 어느 정도 공부한 것 같으니 다시 처음부터 리팩토링을 시작하기로 마음먹었다.

리팩토링을 시작하기 전, 먼저 명확한 기준을 가진 파일 구조의 필요성을 느꼈다. 파일 구조는 사실 개발자의 개인 취향에 따른다고들 하는데, 일단은 잘 알고, 왜 그렇게 하는지 스스로 기준을 정해보는 것도 중요한 것 같다.

아토믹 디자인에 대하여

아토믹 디자인은 리액트 프로젝트를 구조화하는 하나의 방법으로, 유저 인터페이스를 작고 단순한 요소로 하나하나 분리하여 구조를 쌓아나가는 개념이다. 그야말로 분자(atom)들로 시작해 페이지로 완성되는 방법! 특히 리액트는 컴포넌트 기반이며, 개발에 앞서 설계를 권장하는 라이브러리(참고)이기에 많은 사람들이 이 방법을 사용하는 듯 하다.

아토믹 디자인은 원자(Atoms) ➡︎ 분자(Molecules) ➡︎ 유기체(Organisms) ➡︎ 템플릿(Templates) ➡︎ 페이지(Pages) 순으로 계층화되며 인터페이스가 완성된다.

아토믹 디자인에 대해 더 자세히 알고 싶은 분은
리액트 어플리케이션 구조 - 아토믹 디자인
를 참고하시면 좋을 것 같다.

여기서 가장 기억하고 연습해야 할 점은 컴포넌트 내부에서 의존성 로직을 최대한 분리해야한다는 점인 것 같다. 해커 뉴스 프로젝트에서 바로 이 점을 개선해야한다는 것을 깨달았다.

지금 아토믹 디자인만 자세히 적었는데, 아토믹 디자인 시스템 외에도 리액트에는 정말 다양한 디렉터리 설계 구조들이 있다. 아예 경로에 따라서만 컴포넌트들을 나누는 구조도 있었고, 여러가지 기준들(재사용성, 로직, 의존성 컴포넌트 등)을 고려해 다 분리한 설계 구조도 있었다. 다양한 설계 구조들에 대해 공부하고, 현재 나의 프로젝트 적용할만한 기준들을 생각해보니 아래와 같은 구상을 하게 되었다.

여러 리액트 디자인 구조를 보고 구상한 파일 구조

public/
  assets/
src/
  components/
    layout/
    common/
    page's name/
  pages/
  context/
  hooks/
  util/
jsconfig.json

1. public/assets

이미지 파일들은 assets에 넣으며, 용량 파일이 큰 이미지가 아니라면, 특히 아이콘 같은 것은 최대한 svg로 받는다. css와 javascript를 잘 활용할 수 있기 때문이다(약간 주제에 벗어난 이야기지만 svg 이미지에 대한 공부이야기도 나중에 따로 포스팅하면 재미있을 것 같다).

2. src/components/layout

이 부분은 나의 취향이 반영된 폴더인데, 모든 페이지에 반드시 들어가야 하는 컴포넌트를 담는다. 대표적인 예로 헤더나 푸터가 있고, 만약 모든 페이지에 배너가 들어가야 한다면 배너 컴포넌트를 집어넣는다. Next.js를 써보면서 생긴 취향인 듯 싶다.

3. src/components/common

가장 작은 단위의 컴포넌트로 모든 페이지에서 재사용할 수 있을 만한 파일을 넣는다. 사실 규모가 큰 프로젝트라면 제목 따로, 버튼 따로, 텍스트 따로 정말 더 이상 나눌 수 없을 정도로 쪼개는 게 맞겠지만 개인 프로젝트라면 분자 정도의 컴포넌트를 만드는 게 더 효율적일 수도 있을 것 같다. 그러니까 이 부분은 모든 페이지에서 재사용할 수 있을만한 컴포넌트를 분석한 다음 생성하는 것이 좋겠다.

4. src/components/[pages's name]

pages's name에는 각각 현재 만든 라우트 페이지 수대로 폴더를 만든다. 그리고 템플릿 정도의 컴포넌트를 만든다. 어느정도 계층구조가 쌓이면 모든 페이지가 아니라 특정 페이지에만 사용되고, 또 특정 페이지에 의존적인 컴포넌트도 있기에 그런 경우 페이지 폴더를 만들어서 관리하는 것이 더 직관적으로 느껴졌다. 물론 로직은 최대한 덜어낸다. 하지만 이 부분은 아직 고민이 많다. 현재 해커 뉴스 프로젝트에서는 이게 더 효율적으로 느껴져서 이렇게 구성했지만 이 폴더 부분은 조금 더 공부하고 고민할 필요가 있다.

5. src/pages

페이지의 UI를 최종적으로 완성하는 파일은 pages에 담는다. 중요한 점은 pages안 파일의 코드는 최대한 컴포넌트의 구조를 직관적으로 보여주는 파일이어야 한다는 점이다. 그렇기 때문에 어떤 내부 로직을 적는 것은 최대한 지양한다. 아토믹 디자인 예시에서는 pages도 하나의 컴포넌트이기에 컴포넌트 폴더 안에 집어넣었지만 나는 components안에 폴더가 이미 너무 많고, 또한 최종본으로 완성되어 화면이 구현되는 파일이라는 것에 components폴더와 동급이라는 생각이 들어서 개인취향으로 src폴더에 넣었다.

6. src/hooks

당연히 활용성이 높은 커스텀 훅 파일들을 모아놓는 파일!

7. src/util

API나 상수, 함수 같은 전역적으로 활용될만한 코드들을 모아놓는다.

유의할점

• 폴더 뎁스는 최대 3~4개를 넘지 않는다.
  
  

최종적으로 반영된 폴더 구조

추가

나는 상대경로가 너무 가독성이 좋지 않고 불편하다고 느껴서 jsconfing.json 파일을 넣어 기본 시작을 src로 설정한 절대 경로를 사용하고 있다.

pages의 한 파일에서 components 파일을 import하려면 ../, ../../ 이런식으로 폴더 밖으로 나가 해당 파일을 찾아 써줘야했는데 설정을 해주어 바로 components만 쓰면 해당 폴더에 들어갈 수 있다.

설정 코드는

{
  "compilerOptions": {
    "baseUrl": "src"
  },
  "includes": [
    "src"
  ]
}

그럼 진짜 이제 끝!
다음 TIL은 계속됩니다...!

참고한 레퍼런스
React 공식문서: 설계 구조
React 공식문서: 추상화
React 절대경로
리액트 어플리케이션 구조 - 아토믹 디자인
리액트 설계 가이드
"잘" 사용할 수 있는 디자인 시스템 - 모두싸인