폴더 구조 체계화란?

개발자는 협업이 필수아닌 필수인 부분인데
다른 개발자들과 협업을하며 코드를 공유할때 가독성이 떨어지는걸 방짖하기위해 폴더 구조를 나눠 각 코드를 100줄
이하로 나눠서 작성해주는 것이다

Container와 Presenter

Container : JS부분(JavaScript)

Presenter : JSX부분(HTML)

Container에 Presenter를 import해주고

import 파일명 from "경로"

export default function() {
	//JavaScript
}
return(
	//HTML
    <파일명/>
) 

으로 작성해주면 import된 presenter가 복사되어 들어간다.
export해주는 Container는 부모component, import되는 Presenter는 자식component가 된다.

Container와 Presenter 심화 개념잡기

container 컴포넌트

어떠한 동작을 할 것인가에 대해 책임진다.
절대로 DOM 마크업 구조나 스타일을 가져서는 안된다.
presentational과 container 모두를 내부적으로 가질 수 있다.
주로 상태를 가지고 있다.
side effects를 만들 수 있다. ex) db에 CRUD를 요청
props를 자유롭게 받을 수 있다.

presentational 컴포넌트

html, css, presentational component만 사용 가능하다.
app에 대해 완전히 몰라야한다. => 다른 app에서도 이 component를 사용할 수 있을지 스스로에게 물어보자
presentational과 container 모두를 내부적으로 가질 수 있다.
작은 레고 블럭처럼 가능한 작게 만들어야 한다.
상태를 가질 수 있지만 UI에 관련된 상태만 가질 수 있다.
필요 시 visual을 바꾸는 props를 받을 수 있어야 한다.
가끔 완전히 다른 스타일을 불러오는 props를 받기도 한다.

마치며

처음 나도 사용했을때는 이 귀찮은걸 왜 나누지 했는데
하면서 익숙해진 부분이있고
우선 가독성 과 디버깅 을 할때 전에 비해 훠어어얼씬 편해진걸 사용한지 얼마 지나지않아 바로느낄 수
있었다.