Next.js - 컴포넌트와 스타일링 (Component and Styling)

컴포넌트화

Next.js에서 컴포넌트를 만들어 사용하는 것은 리액트 앱에서 하는 방법과 크게 다르지 않다. 그러나 앞선 예시들과 같이, react를 import 해줄 필요가 없다. 먼저, components 폴더를 만든 후, Header.js 파일을 만들어 다음과 같이 코드를 작성해준다.

 

const Header = () => <header>This is header</header>;

export default Header;

 

이제 pages/index.js 파일에 들어가서 다음과 같이 헤더를 추가해준다.

 

import Link from "next/link";
import Header from "../components/HeaderExample";

const index = () => (
  <>
    <Header />
    <h1>hello world</h1>
    <Link href="/hello">
      <a title="hello">Hello Page</a>
    </Link>
  </>
);

export default index;

 

그 후, localhost:3000/에 들어가보면 다음과 같이 헤더가 잘 뜨는 것을 확인할 수 있다.

 

 

컴포넌트 스타일링

리액트의 컴포넌트 스타일링은 크게 두 가지 방법으로 나뉜다.

 

1. 전통적인 css 또는 Sass, postCSS 등의 파일을 이용한 스타일링
2. CSS in JS 스타일링

전통적인 css 파일에는 고려해야하는 문제들이 많이 있다 (특히 SSR, server-side rendering에서). 따라서 Next.js에서는 CSS in JS 방법을 사용하는 것이 좋다. 기본적으로 Next.js에는 styled-jsx라는 CSS 프레임워크가 있다. 따라서 컴포넌트에 CSS 규칙을 사용할 수 있으며, 다른 컴포넌트에 영향을 주지 않는다.

 

기본적인 스타일링

이제 스타일링을 한 번 해보자. 먼저 가장 기본적인 방법으로, style 속성에 스타일 객체를 넣어주는 것이다. Header.js 파일을 다음과 같이 바꿔주자.

 

const Header = () => (
  <header style={{ background: "tomato" }}>This is header</header>
);

export default Header;

 

페이지를 다시 확인해보면 색깔이 잘 바뀐 것을 확인할 수 있다.

 

styled-components를 사용한 스타일링

평소에 자주 사용하는 라이브러리인 styled-components를 사용해보자. 먼저 styled-components를 설치해주고 다음과 같이 /components/Header.js 코드를 작성해준다.

 

import styled from "styled-components";

const StyledHeader = styled.header`
  background: yellow;
`;

const Header = () => <StyledHeader>This is header</StyledHeader>;

export default Header;

 

이후, localhost:3000을 확인해보면,

 

위와 같이 스타일링이 잘 적용되어 있는 것을 확인할 수 있다.

 

styled-components가 Next.js에서 스타일 적용 전 렌더가 되는 문제 해결법

SSR은 서버에서 페이지마다 HTML을 미리 만들어 놓고 자바스크립트 로딩이 끝나기 전 바로 사용자들에게 화면을 보내줘서 사이트의 속도를 빠르게 한다. 하지만 CSS-in-JS를 사용한 스타일링은 자바스크립트에 들어가있기 때문에, CSS가 static하게 적용되는 것이 아닌 자바스크립트에 의해 동적으로 적용되므로, 자바스크립트가 로딩되기 전 스타일이 적용되지 않은 HTML이 렌더링되는 문제점이 있다.

 

 따라서, 이를 해결하기 위해서는 렌더링이 될 때 pages 디렉터리 안에 기본적으로 같이 렌더링 되는 컴포넌트가 있는데, 이 컴포넌트를 커스터마이징하여 문제를 해결할 수 있다.

 

Next.js에서 styled-components와 같은 CSS-in-JS 라이브러리에 대한 SSR을 지원하기 위해선 태크를 보강할 수 있는 커스텀을 사용하여 HTML 구조를 확장해야하는데, 이를 /pages 디렉터리에 _document.js 파일을 만들어 정의하므로써 해낼 수 있다. _document.js는 HTML 문서로 커스텀 도큐멘트를 만들 때에만 작성이 필요하며, 없을 경우 Next.js의 기본값을 사용한다.

 

더 자세한 내용은 아래 글을 참고한다.

 

velog.io/@janghyoin/Jobshopper-project-NextJS%EC%97%90%EC%84%9C-styled-components-%EC%82%AC%EC%9A%A9-hwjzs423yw

[Jobshopper project] NextJS에서 styled components 사용

 

이를 고치기 위한 방법으로는 아래 글을 참고한다.

 

velog.io/@sbinha/next.js-styled-components-%EC%8A%A4%ED%83%80%EC%9D%BC%EC%9D%B4-%EC%A0%81%EC%9A%A9%EC%A0%84%EC%97%90-%EB%A0%8C%EB%8D%94%EA%B0%80-%EB%90%98%EB%8A%94-%EB%AC%B8%EC%A0%9C-%ED%95%B4%EA%B2%B0%EB%B2%95

[next.js] styled components 스타일이 적용전에 렌더가 되는 문제 해결법

 

출처

velog.io/@sbinha/next.js-styled-components-%EC%8A%A4%ED%83%80%EC%9D%BC%EC%9D%B4-%EC%A0%81%EC%9A%A9%EC%A0%84%EC%97%90-%EB%A0%8C%EB%8D%94%EA%B0%80-%EB%90%98%EB%8A%94-%EB%AC%B8%EC%A0%9C-%ED%95%B4%EA%B2%B0%EB%B2%95

velog.io/@janghyoin/Jobshopper-project-NextJS%EC%97%90%EC%84%9C-styled-components-%EC%82%AC%EC%9A%A9-hwjzs423yw

jcon.tistory.com/132