폴더구조
여태까지 하나의 파일에 javascript와 html 부분을 한 번에 다 작성하였지만, 실무에서는 조금 더 세분화하여 각각의 파일을 만들어주고 이를 연결해주는 작업을 한다.
이러한 방식에는 컨테이너/ 프리젠테이셔널 패턴, 훅스 패턴, 아토믹 패턴이 있다.
Container/Presentation 패턴
container/presentation 패턴은 유명한 고전 방식이다. 기존에 하나의 파일에 적어주었던 javascript와 html(jsx)부분을 나눠주는 것이다. 각각의 부분을 새로운 파일에 담아주고 이를 컴포넌트 방식으로 연결해주는 것이다.
위와 같이 기존에 하나의 파일에 같이 코드를 적었다면 이를 js부분은 container, html부분은 presenter로 나누어 파일을 만들어 준다.
그리고 각각의 새로운 파일에서 import와 export를 사용하여 파일들을 연결해준다.
이때 presenter 파일은 container 파일의 return 부분으로 import되어 화면에 그려지며 이때 container는 부모 컴포넌트, presenter는 자식 컴포넌트의 관계가 된다. 그리고 이 모든 페이지는 app 컴포넌트에서 합쳐진다.
컴포넌트 연결이 완료되면 부모 컴포넌트에 있는 기능들을 자식 컴포넌트에 물려줘야하는데 이때는 props를 통해 가능하다.
📌 단 부모가 이런 기능들은 부모에서 자식으로만 줄 수 있어 단방향 관계라고 표현한다.
export와 export-default 차이
export default는 중괄호가 필요 없음
부모 컨테이너에서 import 할 때 이름을 막 써도 상관 없음
export 애들은 중괄호가 필요함
필요한 애들만 불러와서 쓸거기 때문에
