NextJS 시작 #6 | Styles JSX

정의

• 애플리케이션에 styles 를 추가하는 다른 방법
• Next.js 고유의 방법

용법

1. <style> 태그를 열어 줍니다.
2. attribute 로 jsx 를 작성합니다.
3. 내용으로 {} 을 열고 백틱안에 css 를 작성합니다.

특징

• 클래스네임을 랜덤번호로 지정해줘서 컴포넌트 파일들간 클래스네임 충돌을 방지합니다.
• style 태그 안에서 작성되는 css 는 자바스크립트 문자열이기 때문에 {props.color} 와 같이 props 를 그대로 가져다 쓸 수 있는 장점도 있습니다.

다음 글에서는 글로벌스타일 설정을 알아봅시다.

참조

코드스테이츠 NextJS 시작하기