styled-components - 1 (기본)

CSS in Js : 자바스크립트안에 CSS => 자바스크립트 코드로 CSS를 작성

장점

• css-in-js를 사용해 기존의 import방식과는 달리 조건문, 변수 등 다양한 로직을 이용가능

css-in-js 방식을 이용하려면 styled-components를 사용해야 함

---

styled-components: 리액트에서 CSS-in-JS 방식으로 컴포넌트를 꾸밀수 있게 도와주는 패키지

---

사용법

• yarn으로 styled-components 설치

• 터미널에 yarn add styled-components 입력

• 설치 완료 후 아래의 형식을 지켜 사용

const 변수명 = styled.적용하고싶은 html형식 `백틱안에 원하는 속성 기입`

변수명 적용 시 파스칼 케이스 사용 => PascalCase

---

추가로 알아둘 내용

( 1 )

const styledBox = styled.div``;

• 위 형식으로 styled-components 사용 시도 => 실패

• 변수명을 파스칼 케이스로 사용 안함

• StyledBox로 변경 => 성공

( 2 )

• css 속성 입력 시 자동완성 선택 할 때 tab키가 아닌 enter키 누르기를 습관화 하기

• => tab을 눌러서 자동완성을 하면 : (colon) X

• => enter를 눌러서 자동완성을 하면 : (colon) O