[Next.js] (2) 컴포넌트 생성하여 import 받기

공통적으로 사용하는 코드를 하나의 컴포넌트로 묶기

index.js

위 코드에서 index.js에 Nav와 Header 부분은 index.js도 사용하고 있고, photo.js에서도 사용하고 있다.

 

이 경우 두가지 방법이 있을 것이다.

1) Nav와 Header 부분을 index.js도 작성하고, photos.js에도 작성한다.

→ 이 경우 작은 프로젝트에서는 큰 문제는 없겠지만 프로젝트가 커질 수록 불필요한 코드로 인해 코드 가독성과 용량이 커진다는 문제점이 있다.

2) 공통적인 부분을 하나의 컴포넌트로 묶어서 재사용 하기

→ 이 경우 1번에서의 문제점을 해결 할 수 있다.

 

(예시)

 

1) Components 폴더를 생성한다.

 

2) 우선 Components 폴더에 Layout.js와 Nav.js를 생성한다.

Layout.js를 보면 파라미터(인자)로 children을 받아 오는 걸 볼 수 있는 데

Components 폴더에 있는 컴포넌트를 pages 폴더에 있는 컴포넌트에 연결하기 위해서 사용한다고 볼 수 있다.

 

아래 코드와 같이 _app.js에 Layout을 import 받아온 후 실질적으로 Content를 띄워주는 컴포넌트를 감싸주면

자식(children)이 되기 때문에 children으로 받아와 띄워 줄 수 있다.

 

3) Header.js를 생성하여 index.js에 있는 코드를 옮겨준다.

 

이때, 페이지마다 다른 title을 띄워줘야 하기 때문에 props로 데이터를 받아오고,

defaultProps를 사용하여 기본값을 설정 해주었다.

 

4) CSS를 설정 할 때는 globals.css나 CSS 이름.modules.css로 컴포넌트의 CSS를 설정 해줄 수 있다.

(globals.css는 전역에서 적용 할 수 있는 css이고,

이름.modules.css는 연결하는 컴포넌트에 따라 각각 적용 할 수 있는 css이다.)

 

실습에서는 Nav.modules.css 파일을 생성하여 Nav.js에 CSS를 적용 하였다.

---