CSS-in-JS (styled-components)

React에서 스타일링을 하는 방법은 정말 다양합니다.

하지만 이번 글에서는 styled-components로 스타일을 적용하는 방법을 말씀드리고자 합니다.

styled-components란?

- Javascript 파일 안에서 CSS를 처리 할 수 있게 해주는 대표적인 라이브러리입니다.

- React에서 기본적으로 제공하지 않기 때문에 따로 라이브러리를 설치 해주어야 합니다.

- 또한, SCSS 라이브러리 설치 없이 SCSS 문법을 사용할 수 있습니다.

참고 - styled-components(Basics-Motivation)

설치방법

- npm을 통한 설치 : npm install styled-components

- yarn을 통한 설치 : yarn add styled-components

사용방법

1. 설치한 styled-components로 부터 styled 객체를 import 합니다.

2. styled.태그명을 작성 후 백틱(``)기호 안에 적용하고자 하는 스타일을 작성 후 사용하고자 하는 변수(컴포넌트명)에 저장 합니다.

3. return안의 랜더링 되는 코드에 적용을 해주면 작성한 스타일드 컴포넌트가 정상적으로 랜더링되는 것을 확인 할 수 있습니다.