처음 만난 리액트 - 16(2). Styled-components

styled-components

: CSS 문법을 그대로 사용하면서 결과물을 스타일링된 컴포넌트 형태로 만들어주는 오픈소스 라이브러리(리액트 개발에 많이 사용됨).

스타일드 컴포넌트를 사용하기 위해서는 프로젝트에 설치해주어야 함

styled-component 사용 예시

1. styled-components 설치하기

2. styled-component의 기본 사용법 

2-1. import styled from 'styled-components'; 코드 추가

2-2. tagged template literal을 사용하여 구성요소의 스타일을 지정함

 

템플릿 리터럴은 리터럴(변하지 않는 상수값)을 템플릿 형태로 사용하는 문법이며 ``(백틱스)를 사용하여 작성하고 그 안에 대체 가능한 익스프레션을 넣는 방법이다.

템플릿 리터럴은 Untagged Template Literal과 Tagged Template Literal로 나뉜다.

Tagged Template Literal의 사용 예시

``로 둘러싸인 문자열 부분에 CSS 속성을 넣고 태그 함수 위치에는 styled.html 태그 형태로 사용

3. styled-components의 props 사용하기

내부에 props가 사용된 styled-component

4. styled-components의 스타일 확장하기

이렇게 생성된 컴포넌트를 기반으로 추가적인 스타일을 적용하고 싶을 경우

스타일 확장 예시

styled-component를 넣고 백틱스 ``를 추가적으로 넣어 추가로 설정하고 싶은 스타일을 작성해주면 됨.