* 이 글은 Next.js의 공식 튜토리얼을 번역한 글입니다.
** 오역 및 오탈자가 있을 수 있습니다. 발견하시면 제보해주세요!
3편: 공유 컴포넌트 - 현재 글
Next.js는 전부 페이지에 관한 것입니다. React 컴포넌트를 export하고 그 컴포넌트를 pages 디렉터리 안에 넣어 페이지를 생성할 수 있습니다. 그러면 파일 이름을 기반으로 고정된 URL를 가지게 됩니다.
export 된 페이지들은 JavaScript 모듈이므로 다른 JavaScript 컴포넌트를 이 페이지들 안에 import 할 수 있습니다.
이는 어떤 JavaScript 프레임워크에서든 가능합니다.
이번 편에서는 Header 컴포넌트를 만들고 여러 페이지들에서 사용해 볼 예정입니다. 마지막에는 하나의 Layout 컴포넌트를 구현하고 어떻게 이것이 여러 페이지들의 모양을 정의하는데 도움이 되는지 살펴볼 것입니다.
이번 장에서는 간단한 Next.js 애플리케이션이 필요합니다. 다음의 샘플 애플리케이션을 다운받아주세요:
아래의 명령어로 실행시킬 수 있습니다:
이제 http://localhost:3000로 이동하여 애플리케이션에 접근할 수 있습니다.
Header 컴포넌트를 구현해봅시다.
다음과 같은 components/Header.js를 추가해주세요.
이 컴포넌트는 애플리케이션에서 이용가능한 페이지에 대한 두 개의 링크가 있습니다. 또한 보기 쉽도록 링크를 스타일링 하였습니다.
다음으로 페이지들 안에 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 하고 사용할 수도 있습니다.
#트레바리 #개발자 #안드로이드 #앱개발 #Next.js #백엔드 #인사이트 #경험공유
관련 스택
가입하기
