styled-components
Styled-components란?
컴포넌트에 스타일을 직접적으로 선언할 수 있는 CSS-in-JS 라이브러리다. 기존의 CSS, SASS는 스타일 파일이 따로 존재했기 때문에 파일이 복잡해보이기도 하였으며, 직접적으로 변경을 할때의 문제가 발생했었다. 이러한 부분을 보완한 스타일드 컴포넌트는 유동적으로 props를 내려 변경이 가능하며, 기존의 SASS의 장점인 Nesting, Mixin을 그대로 유지하여 스타일을 상속하거나 변수선언등이 편리하다.
잠깐!
Styled-components는 js라이브러리이기때문에 사용전 먼저 터미널을 이용해서 설치해줘야한다. 아래 명령어를 입력하여 설치를 진행하자
$ npm install --save styled-components
Styled-component 사용법
1. 스타일드 컴포넌트 선언방법
가장 먼저 상단에 설치된 스타일드 컴포넌트를 불러와준다. html 문법이 아닌 스타일드 컴포넌트 문법으로 내부에 컴포넌트를 작성해준다. 해당 컴포넌트가 어떤 태그를 상속받는지 적어주면 JSX처럼 해당 태그를 사용할 수 있게 된다. 한가지 주의할 점은 백틱을 사용하여 Tagged 템플릿 리터럴 문법을 이용해야한다는 것이다.
※ Tagged 탬플릿 리터럴 : 템플릿 안에 자바스크립트 객체나 함수를 전달할 때 온전히 추출할 수 있는 문법
2. 스타일드 컴포넌트의 상속과 선택자 활용
스타일드 컴포넌트는 먼저 선언했던 스타일을 상속받을 수 있다. 스타일드 컴포넌트는 상속뿐만 아니라 선택자를 이용해서 스타일을 유동적으로 줄 수있다.
${} 를 이용하여 클래스와 동일하게 해당 스타일을 불러와서 사용할 수 있다. 또한 아래와 같이 자기 자신을 &를 이용하여 선택할 수 있다.
3. props 활용하기
사용하는 스타일드컴포넌트에 props를 선언하여 해당값에 맞춰 유동적인 효과를 줄 수 있다. 삼항연산자를 잘 이용한다면 좀 더 간단하게 로직을 구현할 수 있다. 해당 props명은 원하는대로 선언이 가능하다.
Styled-component 응용하기
1. createGlobalStyle 이용하기
common.css와 동일한 역할을 하는 스타일드컴포넌트의 기능으로 해당 스타일은 글로벌하게 적용 할 수 있다. reset css 스타일을 설정할 때 이용하자.
5분만에 알아보는 Styled-Components
1. Styled Component ?
medium.com
참고문서 : velog.io/@bclef25/styled-components
styled components
styled components 란?
velog.io
참고문서 : styled-components.com/docs/basics
styled-components: Basics
Get Started with styled-components basics.
styled-components.com