[React]파일 구조 파악하기(container - presenter) #3

저번 [React]파일 구조 파악하기 #2 에 이어 이번에는 많이 사용되고 있는 container-presenter 구조에 대해 알아보도록 하겠습니다.

위 사진처럼 container-presenter 구조는 기능을 담당하는 component들과 UI를 담당하는 component를 구분해서 파일을 분리하는 것을 의미합니다. container에는 기능을 담당하는 component, presenter에는 UI를 담당하는 component가 들어갑니다.

이 두 가지의 형식을 표현하는 방식은 사람마다 다르겠지만 제가 경험한 바에 의하면 두 가지가 있었습니다.

container - presenter 파일명(BoardWrite 파일 기준)

1. " . "을 이용한 파일명 구분
   container : BoardWrite.container.js
   presenter : BoardWrite.presenter.js
2. P를 이용한 파일 구분
   container : BoardWrite.js
   presenter : PBoardWrite.js

1번의 경우에는 어떤 파일인지 구체적으로 구분하기에 BoardWrite.queries.js / BoardWrite.styles.js 등과 같이 더욱 많은 파일로 분리되었을 때 관리하기가 쉽다는 점인데요. vscode에서 작업할 때 보통 탐색기 창을 줄여놓고 작업을 하는 탓에 작업을 같이 하면서 동시에 파일 위치를 찾기는 조금 힘들다는 점이 있습니다.

반면, 2번의 경우에는 제일 앞에 대문자를 써서 표현하기 때문에 1번처럼의 확장성은 부족하지만 작업을 할 때 폴더명이 바로 바로 보이기에 한 눈에 확인하기가 용이하다는 장점이 있습니다.