brunch

매거진 개발개발

You can make anything
by writing

C.S.Lewis

by 워니 Feb 06. 2018

Next.js 튜토리얼 3편: 공유 컴포넌트

React 서버사이드 렌더링 프레임워크 Next.js Tutorial

* 이 글은 Next.js의 공식 튜토리얼을 번역한 글입니다.

** 오역 및 오탈자가 있을 수 있습니다. 발견하시면 제보해주세요!



목차

1편: 시작하기 

2편: 페이지 이동 

3편: 공유 컴포넌트 - 현재 글

4편: 동적 페이지

5편: 라우트 마스킹

6편: 서버 사이드

7편: 데이터 가져오기

8편: 컴포넌트 스타일링

9편: 배포하기



개요

Next.js는 전부 페이지에 관한 것입니다. React 컴포넌트를 export하고 그 컴포넌트를 pages 디렉터리 안에 넣어 페이지를 생성할 수 있습니다. 그러면 파일 이름을 기반으로 고정된 URL를 가지게 됩니다.


export 된 페이지들은 JavaScript 모듈이므로 다른 JavaScript 컴포넌트를 이 페이지들 안에 import 할 수 있습니다.

이는 어떤 JavaScript 프레임워크에서든 가능합니다.


이번 편에서는 Header 컴포넌트를 만들고 여러 페이지들에서 사용해 볼 예정입니다. 마지막에는 하나의 Layout 컴포넌트를 구현하고 어떻게 이것이 여러 페이지들의 모양을 정의하는데 도움이 되는지 살펴볼 것입니다.



설치

이번 장에서는 간단한 Next.js 애플리케이션이 필요합니다. 다음의 샘플 애플리케이션을 다운받아주세요:


아래의 명령어로 실행시킬 수 있습니다:


이제 http://localhost:3000로 이동하여 애플리케이션에 접근할 수 있습니다.



Header 컴포넌트 구현하기

Header 컴포넌트를 구현해봅시다.

다음과 같은 components/Header.js를 추가해주세요.


이 컴포넌트는 애플리케이션에서 이용가능한 페이지에 대한 두 개의 링크가 있습니다. 또한 보기 쉽도록 링크를 스타일링 하였습니다.



Header 컴포넌트 사용하기

다음으로 페이지들 안에 Header 컴포넌트를 import하고 사용해봅시다. index.js 페이지를 다음과 같이 변경해주세요:


about.js 페이지도 똑같이 변경할 수 있습니다.


지금 http://localhost:3000로 이동하면 새로운 Header가 보이고 페이지 이동이 가능합니다.


이 애플리케이션에서 간단한 몇 가지를 수정해봅시다!

- 애플리케이션을 종료하세요.

- conponents 디렉토리의 이름을 comps로 바꾸세요.

- ../components/Header 대신에 ../comps/Header로부터 Header를 import 하세요.

- 애플리케이션을 다시 실행시키세요.


동작하나요?

- 네

- 아뇨. "컴포넌트를 찾을 수 없습니다"라는 에러가 발생합니다.

- 아뇨. "컴포넌트는 components 디렉토리 안에 있어야합니다"라는 에러가 발생합니다.

- 아뇨. "comps는 잘못된 디렉터리입니다"라는 에러가 발생합니다.



컴포넌트 디렉토리

예상대로 잘 동작합니다.


꼭 특정한 디렉토리에 컴포넌트를 둘 필요는 없습니다. 원하는 대로 이름을 설정할 수 있습니다. 특정한 디렉토리는 pages 디렉토리뿐입니다.


pages 디렉토리 안에 컴포넌트를 생성할 수 있습니다.


Header 컴포넌트는 이를 가르키는 URL이 필요하지 않기 때문에 pages 디렉토리 안에 두지 않았습니다.



레이아웃 컴포넌트

애플리케이션 안의 다양한 페이지에서 공통의 스타일을 사용할 예정입니다. 이를 위해 공통 레이아웃 컴포넌트를 만들고 각 페이지에서 사용할 수 있습니다. 여기 예시가 있습니다:


components/MyLayout.js에 다음의 내용을 추가해주세요:


위와 같은 코드를 작성하면 다음같이 원하는 페이지에서 레이아웃을 사용할 수 있습니다:


http://localhost:3000 페이지로 이동하여 확인할 수 있습니다.


이제 레이아웃에서 {props.children}을 지워보고 무슨일이 일어나는지 살펴봅시다.


무슨 일이 일어날까요?

- 아무 일도 일어나지 않을 것이다

- 표시되는 페이지의 내용이 사라질 것이다

- "레이아웃은 내용이 필요합니다"라는 에러가 발생할 것이다

- 브라우저의 컴포넌트에 대한 경고 메시지가 표시될 것이다



하위 컴포넌트 렌더링하기

{props.children}을 삭제하면 Layout은 아래와 같이 Layout 엘리먼트 하위에 둔 내용들을 랜더링하지 못합니다:


이것은 레이아웃 컴포넌트를 생성하는 방법 중 하나입니다. 다음은 레이아웃 컴포넌트를 생성하는 다른 방법들입니다:


  

컴포넌트들 사용하기

공유 컴포넌트를 사용하는 두 가지 경우를 다뤘습니다.


1. 공통 Header 컴포넌트

2. 레이아웃


스타일을 지정하고 페이지 레이아웃 및 기타 원하는 모든 작업에 컴포넌트들을 사용할 수 있습니다. 더불어 NPM 모듈에서 컴포넌트를 import 하고 사용할 수도 있습니다.




#React #리액트 #Zeit #Next.js #SSR #JavaScript #자바스크립트 #프레임워크 #framework #가이드 #튜토리얼 #한글 #번역

매거진의 이전글 Next.js 튜토리얼 2편: 페이지 이동
브런치는 최신 브라우저에 최적화 되어있습니다. IE chrome safari