Next.js (3) - 스타일 및 레이아웃

글로벌 레이아웃🌎

• 모든 페이지에 다 적용되어야하는 글로벌 레이아웃을 적용할 때에는 루트 컴포넌트인 _app 컴포넌트에서 페이지 컴포넌트를 포함하는 식으로 설정하면 된다.
  
  
• 위와 같은 방식으로 하면 _app 컴포넌트로부터 레이아웃을 위한 코드를 깔끔하게 분리 가능하다.
• 그리고 CSS module을 사용해서 글로벌 레이아웃을 줄 수 있다.

페이지별 레이아웃 설정📃

• 위와 같이 특정 페이지에만 적용하고 싶은 레이아웃이 있다고 가정하자.
  
• 위와 같이 home 컴포넌트에 저장된 get-layout이라는 메서드는 페이지라는 매개변수로 현재 페이지 역할을 할 컴포넌트를 받아와서 SearchableLayout 으로 감싸진 형태의 페이지를 즉, 이 레이아웃을 적용한 페이지를 리턴해주는 함수가 된 것이다.

❓그런데 함수에 메서드를 추가할 수 있어??

• 사실 자바스크립트의 모든 함수들은 객체이다. 그래서 메서드를 추가할 수 있다.
  
• 위의 Home 컴포넌트 페이지 역할을 하는 컴포넌트에서 별도의 메서드를 추가해놓으면 _app 컴포넌트에서 전달을 받았을때 const getLayout = Component.getLayout; 이렇게 꺼내와서 쓸수 있다는 것이다.
• 그래서 getLayout 메서드로 페이지 역할을 할 컴포넌트를 전달 받아서 레이아웃을 적용해서 리턴하도록 만들었기에 _app 컴포넌트에서 그냥 getLayout 함수를 호출해서 적용할 수 있는 것이다.
• 그런데 getLayout 함수를 적용하지 않은 페이지는 오류가 발생할 것이다! 별도 설정하지 않았는데 메서드를 불러오면 undefined가 될 것이다.
  • 그래서 이럴 경우 예외처리를 해줘야한다. ?? 연산자를 통해 undefined일 경우 page 매겨변수를 받아서 그냥 page를 리턴해주면 되겠지.