레이아웃과 스타일링
gatsby-starter-default를 사용하면 기본 컴포넌트로
header.jslayout.js
이 제공된다.
layout.js은 헤더를 포함한 전체 페이지 레이아웃을 결정하는데 pages에 정의된 개별 페이지를 위한 자바스크립트 파일에서 이 layout 컴포넌트를 사용한다.
내 블로그와 같이
- 헤더
- 메뉴
- 본문
- 풋터
로 구성된 화면이라면 각 항목을 컴포넌트로 정의하고 layout.js에서 이를 사용하여 개별 페이지에 동일한 레아아웃을 적용할 수 있다.
Gatsby로 이전하면서 느꼈던 좋은 점이 바로 이것인데 바로 컴포넌트의 재사용이 매우 쉽다는 것이다. 때문에 사이트 화면을 구성할 때도 비단 레이아웃 뿐 아니라 세부적인 요소에서(블로그 태그 같은 것들)을 여러 페이지에서 재사용 할 수 있도록 만들어 보는 재미가 있었다.
다만 아쉬웠던 점은 스타터에서 CSS를 적용한 방식인데 아래와 같은 방식으로 되어 있다.
<div
style={{
margin: `0 auto`,
maxWidth: 960,
padding: `1.45rem 1.0875rem`,
}}
>개인적으로는 불필요하게 코드가 늘어져 좋아보이지 않았다. 거기다 내부에 정의한 스타일은 일반적인 CSS를 정의할 때 사용되는 kebab-case가 아닌 cameCase를 사용하는데 이 때문에 나중에 스타일 코드를 별도의 CSS 파일로 분리하거나 styled-components 라이브러리를 적용하는데 추가적인 노력이 필요했다.
만약 이제 막 Gatsby로 블로그를 만들기 시작했다면 처음부터 styled-components를 활용할 것을 권한다. 앞서 말한 이유와 더불어 디자인과 관련된 내용을 효과적으로 분리할 수 있고, 기본 html 태그에 의미 있는 이름을 붙여줌으로써 컴포넌트의 구조를 더욱 이해하기 쉽게 만들 수 있다는 점에서 이점이 있다고 생각한다.
사족: 자바스크립트와 CSS를 섞어 사용하는 방식을 CSS-in-JS라고 부르는 모양인데 아래 두 글을 읽어보는 것을 추천한다.