프로젝트를 진행하면서 폴더구조를 어떻게 설계해도 상관은 없지만
누가 언제 열어봐도 아 여기엔 이게 있겠구나? 여기구나?라고 알수 있는 가독성 좋은 폴더 구조를 설계하는것이 좋다고 합니다.
프로젝트 규모가 커지면 커질수록 폴더 구조가 상당히 중요한데
여기에서 코드 줄이200줄이 넘어가게 된다면 우리는 코드가 길다 라고 느낍니다
스크롤이 길어지면 길어질수록 보는사람의 눈을 해치겠죠
그래서 우리는 파일을 쪼개서 만들었습니다 스크립트 영역은 container, JSX(UI) 영역은 presenter 항상 파싱은 상단 부터이기도 하고 기능의 대한 부분은 다 스크립트에 있기 때문에 container가 부모이다~ 라고 생각하면 편할것 같습니다
우리는 이러한 구조를 패턴이라고 부릅니다.
리액트에서 사용하는 유명한 패턴으로는 위 처럼 container / presentational 패턴과 atomic 패턴이 있습니다.
저는 쿼리부분이나 map 부분도 따로 설계를 해놨습니다.
이렇게 파일을 따로따로 만들어도 하나의 페이지를 그려줘야 하기 때문에 서로 연결을 해놔야겠죠 이것을 export,import라고 합니다
기능을 담당하는 container에서 쿼리문을 import하고 query.js 에서는 쿼리문을 export 한다면 서로 연결이 되어서 데이터가 합쳐지겠죠
연결하는 부분은 간단합니다 쌍방향이 아닌 부모(container) -> 자식(presenter)에게만 데이터를 전달할수 있고
자식(presenter)에서 부모(container) 데이터를 가져 오려면 {}객체 형태로 모든 함수를 다 쓰던지 아니면 props로 받아오는 방법이 있습니다
위와 같이 자식컴포넌트인 presenter를 부모 컴포넌트인 container에 불러와 하나로 합쳐 실행 하는 것 입니다.
반드시 기억해야하는 점은, 파일은 두개로 나뉘어져 있지만 실행시에는 pages에서 하나로 합쳐져서 실행된다는 점 입니다.
우리가 브라우저로 볼 수 있는 컴포넌트는 pages에 있는 index.js 뿐이기 때문에 하나로 합쳐둔 container를 pages에 가지고 와서 import 해주셔야 합니다.
💡 부모 컴포넌트와 자식 컴포넌트
→ import되어 불려가는 컴포넌트를 자식 컴포넌트라고 합니다.
반면 import하여 불러오는 컴포넌트를 부모 컴포넌트라고 합니다. 자식컴포넌트는 부모 컴포넌트 안에 포함되는 구조 입니다.
💡 props drilling?
→ props가 자식에게 넘겨주는 단계가 두단계 이상될 경우를 우리는 props drilling이 일어났다 고 합니다.
props drilling은 과도하지 않으면 괜찮지만, 과도하게 이루어지면 해당 props가 어디서 내려지고 있는지 찾는것이 굉장히 난해해집니다.
따라서 최대한 drilling이 안일어나게 해주시는 것이 코드의 가독성과 유지보수 면에서 유리합니다.
props drilling을 방지하기 위해서는 global state를 이용하는것이 좋습니다.
