실무용 폴더구조

프로젝트가 커지고 기능이 다양해지고 코드가 늘어날수록 하나의 파일에 모든 코드를 담는 것은 불가능하다.
프로젝트에 따라서 폴더와 파일들은 세분화되며 구조가 매우 복잡해 질 수 있다.
이때 체계적으로 정돈된 파일과 폴더구조는 가독성과 유지보수에 있어서 굉장히 중요하다.
실무에서 사용하는 폴더구조의 다양한 방법들을 패턴이라고 부르는데,
리액트에서 사용하는 대표적인 패턴으로 container/presentational 패턴이 있다.

container / presentational 패턴이란

소스 코드를 자바스크립트의 기능부분과 JSX(UI)로 나누는 방법이다.
프레젠테이셔널(presentational) 컴포넌트는 순수하게 UI를 보여주는 역할을 담당하며,
데이터처리 및 기능 등을 처리하는 코드는 컨테이너(container) 컴포넌트에 담는다.

JSX란?

→ JavaScrip Xml의 약자로 자바스크립트의 확장 문법이다.
리액트에서는 virtual DOM을 다루고 있기 때문에 html을 가장한 JSX를 사용해야한다. JSX는 브라우저에서 실행되는 과정에서 자바스크립트 언어로 바뀌게 된다.

부모 컴포넌트와 자식 컴포넌트

presentational 컴포넌트는 container 컴포넌트에 불려가 부모/자식 관계를 형성한다.
import되어 불려가는 컴포넌트를 자식 컴포넌트, import하여 불러오는 컴포넌트를 부모 컴포넌트라고 한다. 자식컴포넌트는 부모 컴포넌트 안에 포함되는 구조이다.
컴포넌트를 나누는 이유는 실무에서 방대한 코드양을 관리하기 어렵기 때문에 보기 쉽게 나누는 것이다.

Container, Presenter 의 폴더를 분리하는 것과 더불어, styles, queries 파일 또한 각각의 폴더에 분리해주면 디자인 수정사항 발생시 styles 폴더에서, api 수정시 queries 폴더에서 작업하면 된다. 이는 협업과 유지보수가 훨씬 용이하도록 해준다!

또한 공통적으로 쓰이는 함수는 libraries 폴더에 저장해주면 함수를 한번만 만들어 수십 수백개의 파일로 import해 올 수 있다.