패스트캠퍼스 챌린지 21일차 - 리액트 라이브러리 styled-component (1)

 

 

CSS in JS

 

리액트에서 css를 사용하면서 발견된 문제들을 해결하기 위한 개념을 말한다.

(JS 안에서 CSS를 작성하는 것)

페이스북에서 일하는 프론트엔드 팀에서 만든 발표자료 를 보면

 

 

리액트를 사용하면서 발견되는 css의 문제점

 

- Global namespace

  자바스크립트는 글로벌 변수를 지양해야하는데 

  css의 경우 import된 곳에서는 전부 적용되는 부분이 있어 작은 의미의 글로벌로 사용된다

- Dependencies 

  css 간의 의존 관계를 서비스가 커질수록 관리하기가 어렵다.

- Dead Code Elimination 

  컴포넌트나 코드의 경우 사용안할시 삭제 등으로 관리하게되는데 css는 사용하는 건지 확인하기가 어렵다

- Minification

  클래스 이름을 유의미하게 최소화하는 작업을 할수가 없다

- Sharing Constatns

  JS의 코드와 값을 공유하기가 쉽지 않다

- Non deterministic Resolution

  css 파일이 여러개일 때 어떤 파일을 먼저 로드했느냐에 따라 스타일이 덮어씌워지는 경우가 있다

- Isolation

  스타일과 컴포넌트 파일을 따로 관리할수 없음, 재사용시 스타일 적용 문제로 인해서 css 파일까지 재사용해야함

 

styled-component의 특징

 

리액트에서 css를 사용하면서 느끼는 문제점을 해결하기 위해

css in js 개념을 적용한 대표적인 라이브러리 중 하나가 styled-component이다.

 

스타일드 컴포넌트(styled-components)

 

styled components는 우리에게 친숙한 자바스크립트로 css를 사용하게 해준다. 

 

styled-component 설치

# with npm
npm install --save styled-components

# with yarn
yarn add styled-components

 

 

styled-component 공식문서

 

 

 

 

 

 

https://bit.ly/3FVdhDa

수강료 100% 환급 챌린지 | 패스트캠퍼스

본 포스팅은 패스트캠퍼스 환급 챌린지 참여를 위해 작성되었습니다

 

 

#패스트캠퍼스 #패캠챌린지 #직장인인강 #직장인자기계발 #패스트캠퍼스후기 #한번에끝내는React의모든것초격차패키지Online.