Next.js - Link

들어가면서

<Link>

nextjs의 꽃은 라우팅이다. a 태그를 사용하면 서버에 페이지를 요청하고 새로 고쳐지기 때문에 클라이언트 사이드 렌더링을 할 수 없다. nextjs의 Link API를 사용할 경우 prefetch를 통해 새로 고치지 않고 라우팅 할 수 있어서 클라이언트 사이드 렌더링의 장점도 가져갈 수 있다.

<Link>는 'location.history'를 제공해줘서 뒤로가기에 대한 코드가 필요없다. <Link> 안 a 태그에는 prop을 내려줄 수 있는데 <Link> 는 prop을 줄 수 없다. <Link> 는 HOC라 href같은 일부 prop만 받는다. onClick은 가능하다!

공통 컴포넌트

Layout 컴포넌트 중요하다.

공통으로 쓸 레이아웃을 만들고

필요한 컴포넌트에 감싸주면 된다.

• 공통 컴포넌트를 만드는 두 가지 방법

1. HOC

index.js

about.js

이렇게 Page로 컴포넌트를 정의하고 만들어 놓은 HOCLayout에 인자로 넣는다.

이렇게 HOC를 이용해서 공통 컴포넌트 사용이 가능하다.

troubleshooting

HOCLayout 컴포넌트에서 return 부분이 화살표 함수로 되어있는데

그냥 리턴하게 되면 서버 에러가 뜬다. HOCLayout 컴포넌트가 아니라 그 안에 있는 인자를 리턴해야 하는 것이기 때문에 화살표로 함수를 만든다.(이렇게 이해)

2. prop으로 받기

이렇게 렌더될 부분을 변수에 넣고 Layout 컴포넌트의 prop으로 내려준다.

Layout 컴포넌트는 props로 받아서 렌더!