brunch

매거진 개발개발

You can make anything
by writing

C.S.Lewis

by 워니 Feb 07. 2018

Next.js 튜토리얼 8편: 컴포넌트 스타일링

React 서버사이드 렌더링 프레임워크 Next.js Tutorial

* 이 글은 Next.js의 공식 튜토리얼을 번역한 글입니다.

** 오역 및 오탈자가 있을 수 있습니다. 발견하시면 제보해주세요!



목차

1편: 시작하기 

2편: 페이지 이동 

3편: 공유 컴포넌트

4편: 동적 페이지 

5편: 라우트 마스킹

6편: 서버 사이드 

7편: 데이터 가져오기 

8편: 컴포넌트 스타일링 - 현재 글

9편: 배포하기



개요

지금까지 컴포넌트를 스타일링 하는 것을 미뤄왔습니다. 그러나 이제는 몇 가지 스타일을 적용해볼만 합니다.


React 애플리케이션에는 컴포넌트를 스타일링 할 수 있는 여러가지 기술들이 있습니다. 크게 두 가지 방법으로 분류할 수 있습니다:

1. 전통적인 CSS 파일 기반의 스타일링 (SASS, PostCSS 등)

2. CSS in Js 스타일링 


결과적으로 전통적인 CSS 파일 기반의 스타일링(특히 SSR)은 실용적인 문제가 많아 Next.js에서 스타일을 지정할 때는 이 방법을 사용하지 않는 것이 좋습니다. 


대신 CSS in JS 방법을 추천합니다. 이 방법은 CSS 파일들을 불러오는 것보다 개별적인 컴포넌트 스타일링 할 때 사용 할 수 있습니다.


Next.js는 styled-jsx라는 CSS in JS 프레임워크를 미리 설치해두었습니다. 컴포넌트에 이미 익숙한 CSS를 작성할 수 있습니다. 이 CSS는 해당 컴포넌트에만 적용되며 심지어 하위 컴포넌트에도 적용되지 않습니다.

이는 CSS가 범위가 있음을 뜻합니다.


styled-jsx를 어떻게 사용할 수 있는지 살펴봅시다.



설치

이번 장에서는 간단한 Next.js 애플리케이션이 필요합니다. 다음의 샘플 애플리케이션을 다운받아주세요:


아래의 명령어로 실행시킬 수 있습니다:


이제 http://localhost:3000로 이동하여 애플리케이션에 접근할 수 있습니다.



home 페이지 스타일링하기

home 페이지(pages/index.js)에 스타일을 추가해봅시다.


간단히 pages/index.js를 다음과 같이 변경해주세요:

    

<style jsx> 엘리먼트를 살펴봅시다. 이것은 CSS를 작성하는 곳입니다.


코드를 바꾼 후 블로그 home 페이지는 다음과 같이 보일 것입니다:


위의 코드에서 스타일 태그 안에 직접 스타일을 작성하지 않고 템플릿 문자열 안에 작성하였습니다.


템플릿 문자열({``}) 없이 직접 CSS를 작성해봅시다:


어떤 일이 일어날까요?

- 아무 일도 일어나지 않는다.

- 새로운 스타일이 적용된다.

- "문법 에러: 기대되지 않는 토큰"이라는 에러가 발생한다.

- "허용되지 않는 스타일 제공자"라는 에러가 발생한다.



스타일은 템플릿 문자열 안에 위치해야 합니다

styled-jsx는 babel 플러그인을 통해 동작합니다. babel 플러그인은 빌드 과정에서 모든 CSS를 분해하고 적용합니다. (스타일이 추가 시간 없이 적용됩니다)


styled-jsx 내에 제약 조건을 제공합니다. 나중에 styled-jsx 안에 동적 변수를 사용할 수 있습니다. 이것이 스타일을 템플릿 문자열 ({``}) 안에 작성해야하는 이유입니다.



스타일과 중첩된 컴포넌트

home 페이지에 작은 변화를 만들어봅시다. 다음과 같이 링크 컴포넌트를 분리시켰습니다:

    import Layout from '../components/MyLayout.js'

    

pages/index.js 안의 내용을 위와 같이 수정해봅시다.


무슨 일이 일어나나요?

- 아무런 일도 일어나지 않는다.

- 링크가 아닌 h1만 스타일이 적용된다.

- 페이지에 에러가 발생한다.

- 콘솔에 에러가 발생한다.



중첩된 컴포넌트에는 적용되지 않습니다

위의 코드를 실행하면 다음과 같이 보입니다:


보다시피 CSS는 하위 컴포넌트 내부의 엘리멘트에는 적용되지 않습니다.


styled-jsx의 특징은 더 큰 애플리케이션에서 스타일들을 관리할 때 도움이 됩니다.


이 경우에는 하위 컴포넌트에 직접 스타일을 적용해야 합니다. 지금 상황에서는 링크 컴포넌트에 직접 스타일을 적용해야 합니다:


다른 방법로는 global selectors을 사용할 수 있습니다.



전역 스타일

때때로 하위 컴포넌트 안의 스타일을 바꿔야 합니다. 일례로 React에서 마크다운을 사용하는 경우가 있습니다. post 페이지(pages/post.js)에서 볼 수 있습니다.


post 페이지는 전역 스타일이 유용하게 쓰일 수 있는 곳입니다. styled-jsx를 사용하여 몇 가지 전역 스타일을 추가해봅시다. pages/post.js에 다음과 같은 내용을 적용해주세요.

다음 내용을 적용하기 전에 npm install --save react-markdown 명령어를 통해 react-markdown 컴포넌트를 설치해주세요. 



무슨 일이 일어나나요?

- 아무런 일도 일어나지 않는다.

- 마크다운 컨텐츠에 스타일이 적용된다.

- 페이지에 에러가 발생한다.

- 콘솔에 에러가 발생한다.



전역 스타일이 동작합니다

전역적으로 스타일이 적용되므로 잘 동작합니다.


이 기능은 매우 유용할 수 있지만 항상 전역 prop 없이 스타일을 작성하길 추천합니다.


여전히 일반적인 스타일 태그보다 좋은 방법입니다. styled-jsx를 사용하면 필요한 모든 접두사와 CSS 유효성 검사가 babel 플러그인 내부에서 수행되어 추가적인 런타임 오버헤드가 없습니다.



다음엔 무엇을 해야할까요

이 편에서는 styled-jsx의 표면만 다루었습니다. 더 많은 것들을 할 수 있습니다. styled-jsx Github 저장소에서 더 많은 내용을 참고하세요.


Next.js에서 꽤나 괜찮은 다른 스타일링 방법들이 있습니다. 이 부분도 같이 참고해주세요.




#React #리액트 #Zeit #Next.js #SSR #JavaScript #자바스크립트 #프레임워크 #framework #가이드 #튜토리얼 #한글 #번역




매거진의 이전글 Next.js 튜토리얼 7편: 데이터 가져오기
브런치는 최신 브라우저에 최적화 되어있습니다. IE chrome safari