[Next] pages와 components 분리하기

pages와 components

Nextjs에서 pages와 components 폴더를 분리해서 사용한다. 어떤 것이 다를까?

• pages는 말 그대로 페이지에 보이는 것을 말한다. 이와 다르게 components는 pages 안에 들어가는 컴포넌트들의 모임 장소이다.
  
  

📁 현재 폴더 구조

- components
	- organisms
    	- goals
        	- goals.tsx
            - index.ts
            - goals.styled.ts
- pages
	- goals
    	- form
        	- index.tsx
        - index.tsx ✨ 여기에서 goals component 사용

next에서는 pages의 구조에 따라 URI가 결정된다. /goals/form과 /goals 페이지가 따로 존재한다.

어디까지 컴포넌트로 만들어야 할까?

이건 개발자의 성향이 따라 다르다. 나는 페이지를 개발할 때 layout을 제외한 큰 부분까지 component로 만들었고, 다른 팀원은 index.tsx에 들어갈 요소를 여러 컴포넌트로 만들었다. 이것을 계기로 아토믹 디자인을 반영하게 되었다.

fetch를 어디서 해야 할까?

우리는 firestore에 데이터를 저장하고 가져오는 작업을 하고 있다. page에서 fetch하고 component로 넘겨주는 것이 component를 가볍게 관리할 수 있는 방법이다. 처음에 작업할 때는 "page가 보여주는 거니까 page는 가볍게 하고 웬만한 작업을 component에서 해야겠다"고 생각했다. 하지만 실제로는 나의 생각과 정반대였다. (우리 팀원 말을 인용하면) component는 바깥에서 무슨 일이 일어날지 모르는 UI밖에 모르는 바보로 만들어야 했다.

개선된 사항

• 자식 컴포넌트에서 부모 컴포넌트가 넘겨준 props를 사용할 수 있다.
  • 자식 컴포넌트 goals component 부모 컴포넌트 goals page
  • 이전에는 자식 컴포넌트에서 fetch를 해서 부모 컴포넌트에서 사용할 수 없었다.
• component는 UI에만 관여하기 때문에 style과 관련된 속성을 쉽게 찾아 수정할 수 있다.

다른 개발자의 의견도 알고 싶어서 react fetch in component or page로 검색을 해봤는데 fetch하는 기술적인 방법을 알려줘서 원하는 글을 찾지 못했다.