[코드숨] 리액트 6주 차 회고

코드숨의 소프트웨어 개발의 지혜 <리액트 편> 9기 과정을 시작한 지 6주가 지났다. 이번 주부터는 여러 페이지가 필요해지면서 파일도 많아지고, 라우팅 기능도 추가됐는데, 그로 인해 다양한 고민을 하게 되는 한 주였다.

코드숨

폴더 구조

라우팅이 도입되면서 여러 페이지를 가질 정도로 프로젝트가 커지다 보니 파일들을 효율적으로 관리하기 위해 폴더를 구조화할 필요성을 느꼈다. 리액트 공식 문서에서는 이에 대해 너무 깊게 생각하지 마세요(Don't overthink it) 라고 조언하지만, 프로젝트가 커질수록 가장 많이 고민하게 되는 부분이 아닐까 싶다.

 

이와 관련된 여러 자료가 있지만 특히 Evolution of a React folder structure and why to group by features right away가 많은 도움이 되었다. 이 글의 내용을 기반으로 내 프로젝트의 구조를 변경하면서 트레이너님과 수차례 의견을 주고받았는데 그 과정에서 많은 것을 배울 수 있었다.

 

Popular React Folder Structures and Screaming Architecture

이름에서 역할을 명확히 드러내자

RestaurantDetailPage 폴더

• RestaurantDetailPage는 단순히 페이지를 구분하는 역할만 하며, RestaurantContainer를 렌더한다.
• RestaurantContainer는 레스토랑과 관련된 상태 관련 로직만 처리하며, 그 상태를 Restaurant에 전달 및 렌더한다.
• Restaurant는 부모로부터 받은 레스토랑 상태를 적절한 UI로 보여준다.

위와 같은 구조에서 Restaurant가 하나의 컴포넌트에서 상태 및 UI 로직을 모두 처리하는지, 상태 로직만 처리하는 Container 컴포넌트와 UI 로직만 처리하는 Presentational 컴포넌트로 구분돼 있는지는 RestaurntDetailPage의 관심사가 아니라 생각했다. 그래서 RestaurntDetailPage에서 RestaurantContainer를 import 할 때, 다음과 같이 Restaurant를 가져오는 것처럼 해봤다(실제로는 RestaurantContainer를 import 한다).

import Restaurant from './Restaurant';

이에 대해 받은 피드백은 헷갈린다 였다. 지금 생각해 보니 프로젝트 전체에서 Container 컴포넌트를 아예 사용하지 않으면 모를까 Container 컴포넌트가 존재함에도 Container 컴포넌트를 Presentational 컴포넌트처럼 가져와서 사용한다면 충분히 헷갈릴 수 있을 것 같다. 앞으로는 이름에 그 역할이 분명히 드러나도록 해야겠다.

 

절대 경로

파일이 여러 폴더로 나눠지고, 관련 있는 파일들끼리 하나의 폴더로 묶으면서 멀리 떨어진 파일을 import 할 때 뎁스가 과하게 깊어지는 문제를 겪었다. 예를 들면 다음과 같다.

import { get } from '../../../../../util';

이 문제를 해결하기 위해 절대 경로를 도입해서 다음과 같이 사용할 수 있도록 했다.

import { get } from '@/util';

이 기능이 문제없이 동작하려면 jsconfig, webpack, jest, eslint 등 많은 설정 파일을 수정해야 해서 꽤 어려움을 겪었지만, 한편으로는 각 설정 파일에 대한 이해도를 높일 수 있는 좋은 기회였다.

페이지 컴포넌트의 역할

나는 이번 과제에서 페이지 컴포넌트는 단순히 페이지만 구분하는 역할로서 다른 기능은 전혀 없이, 그 페이지에서 사용되는 컴포넌트들을 렌더만 하도록 했다. 그런데 아샬 님의 풀이 영상을 보니 페이지 컴포넌트에서 라우팅 관련 로직을 처리함으로써 그 하위 컴포넌트에서는 라우팅 관련 로직을 신경 쓰지 않도록 할 수 있다는 것을 알게 됐다. 다음 과제에서 꼭 활용해 볼 생각이다.

블로그

이제 블로그를 시작한 지도 한 달이 조금 지났지만 아직까지 여러 이유로 제대로 된 글(어떤 주제에 대해 상세히 정리한 글)을 쓰지 못하고 있다. 이번 주에는 제대로 된 글을 꼭 써야겠다.