Container / Presenter패턴
JavaScript/ Html(JSX) 부분으로 나누어 만든것을 말한다.
export default 부터 return 전까지의 부분은 JavaScript 부분으로 Container영역, return부터 마지막 괄호까지는 JSX 부분으로 Presenter영역으로 나누어 두개의 파일로 나누어 만들 수 있다.
이때, Container부분 안에서 Import를 통해 화면에 보여지는 UI부분인 Presenter를 불러와야 한다. 불러오게 되면 Container 안에 있던 함수들과 변수들이 Presenter에 위치한 함수와 변수들과 연결이 되지 않는데 이를 위해 props라는 기능을 사용하게 된다.
Atomic패턴
소스코드를 아주 작은 컴포넌트 단위로 먼저 쪼개는 방법으로, 이렇게 하는 이유는 컴포넌트의 중복을 최소화 하기 위함이다.
총 5개의 폴더 구조로 이루어지며, 각각의 의미는 화학의 원리를 이용하여 만든다.
atomic패턴은 디자이너 세계에서 널리 알려진 패턴으로 atmoic패턴을 사용하면 디자이너들과 협업에 유리해질 수 있고, 프로젝트 시작부터 체계적인 UI 설계가 가능하다.
하지만, 프로젝트 시작부터 UI를 디자이너와 함께 전체적으로 설계해야하므로 실제 개발준비까지 걸리는 시간이 오래걸릴 수 있어 시간, 비용, 팀의 상황 등에 따라서 적용하는 것이 일반적이다.
Props
변수와 함수를 연결하기 위해 나온 개념이다.
Props를 통해서 부모가 가지고 있는 함수와 변수, 데이터, 기능 등을 자식한테 물려줄 수 있게 되었다.
리엑트에서의 데이터 흐름은 단방향으로, 자식컴포넌트에서 부모컴포넌트로는 데이터를 전달할 수 없다. 이는 나중에 에러가 발생했을 때 에러를 해결하기가 수월하다는 장점이 있다.
