프로젝트가 커지고 기능이 다양해지고 코드가 늘어날수록
하나의 파일에 모든 코드를 담는 것은 불가능하다.

따라서 폴더와 파일들이 세분화되고 구조도 복잡해진다.
이에따라 체계적으로 정돈된 파일&폴더를 구조화하는 것은 매우 중요하다.

container / presentational 패턴이란

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

기능과 보이는부분을 나눈 컴포넌트는 부모/자식 관계를 형성하여 export와 import를 통해 코드를 연결할 수 있다.

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

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

atomic 패턴

아토믹 패턴이란,

컴포넌트의 중복을 최소화하기 위해
소스코드를 아주 작은 컴포넌트 단위로 먼저 쪼개는 방법을 의미한다.

세계적으로 널리 알려진 아토믹 패턴은 총 5개의 폴더 구조로 이루어지며 화학의 원리를 담아 만들어졌다.
체계적인 UI설계를 돕기때문에 디자이너와 협업 시에 매우 유용하다.