* 이 글은 Next.js의 공식 튜토리얼을 번역한 글입니다.
** 오역 및 오탈자가 있을 수 있습니다. 발견하시면 제보해주세요!
8편: 컴포넌트 스타일링 - 현재 글
지금까지 컴포넌트를 스타일링 하는 것을 미뤄왔습니다. 그러나 이제는 몇 가지 스타일을 적용해볼만 합니다.
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 페이지(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에서 꽤나 괜찮은 다른 스타일링 방법들이 있습니다. 이 부분도 같이 참고해주세요.
#트레바리 #개발자 #안드로이드 #앱개발 #Next.js #백엔드 #인사이트 #경험공유
관련 스택
가입하기
