NextJS에 React 컴포넌트 추가하기 (NextJS React 프로젝트 03)

 

이전 글에서, 설치된 NextJS 프로젝트에 Typescript를 추가했었습니다.

 

그리고 이번에는 본격적으로 React 컴포넌트를 추가하여

페이지와 내부 컴포넌트를 만들어서 index 홈페이지를 구성하려고 합니다.

 

 

 

1. 컴포넌트 디렉토리 생성

우선 컴포넌트 디렉토리 구조는 사람마다, 프로젝트마다, 회사마다 다릅니다.

어떤 곳은 atomic 디자인을 추구하며 디렉토리를 여러 단계로 구분하고,

어떤 곳은 components라는 한 폴더 안에 두기도 하죠.

(컴포넌트 디렉토리 구조에 대해서는 나중에 구체적으로 다뤄볼게요!)

 

우선은 대부분의 프로젝트가 components라는 폴더를 갖고있으니 만들어보겠습니다.

 

 

 

(선택) Container 디렉토리 생성

그리고 저는 page와 1:1 대응하는 컴포넌트를 container에 담는 방식을 사용하려고 합니다.

components에는 재사용가능한 코드를 모아두려는 것이죠.

(이러한 폴더 구조는 취향차이니까 components 안에서 작성하셔도 무방합니다)

 

 

 

2. 페이지 컴포넌트 생성

우선 메인페이지를 디자인하기 위해 페이지 컴포넌트를 생성해보겠습니다.

저는 Home이라는 이름으로 폴더를 만들고 그 밑에 HomeContainer.tsx를 생성했습니다.

 

(저는 containers라는 폴더에 만들어서 파일명/컴포넌트명을 HomeContainer로 지었는데,

어떤 이름이든 상관 없습니다)

 

const HomeContainer = () => {
  return (
    <div>
      <h2>Hi, this is Pumpkin-Raccoon</h2>
    </div>
  )
}

export default HomeContainer

 

 

 

3. 컴포넌트 적용하기

그럼 이제 만든 컴포넌트를 pages/index.tsx에 적용해볼까요?

 

기존에 작성되어있던 코드를 지우고 다음과 같이 바꿔봅시다

(import 경로는 만든 폴더 구조에 따라 달라질 수 있으니 경로를 고려하거나 자동완성으로 생성하게 합니다)

import HomeContainer from "../containers/Home/HomeContainer"

const HomePage = () => {
  return (
    <HomeContainer />
  )
}

export default HomePage

 

그리고 이제 yarn dev나 npm run dev로 한 번 실행시켜보겠습니다

npm run dev

 

 

짠! 어렵지 않게 나만의 페이지를 만들었죠?

다음에는 만든 컴포넌트를 스타일링 하는 방법을 배워보겠습니다!