[새싹 프론트엔드] 7주차 - 4

Post CSS

CSS를 불러와서 사용할 때 클래스 이름을 고유한 값 형태로 자동으로 만들어 컴포넌트 스타일 클래스 이름이 중첩 되는 현상을 방지해주는 기술

post css와 scss 같이 사용

 

값 형태

 

사용 방법

버전 2 이상부터는 별도의 설정이 필요 없고, 다음과 같은 확장자로 파일을 저장하기만 하면 적용

모듈 파일을 불러옴 

 

 

실습) Post CSS

 

App.js

 

CSSModule.js

 

CSSModule.module.css

 

실행 결과

 

 

실습) global 스타일

 

App.js

 

GlobalStyle1.js

 

GlobalStyle2.js

 

GlobalStyle1.module.css

 

실행 결과

어떤 스타일에 global을 쓰면 전역변수로 되어 그대로 물려 받는다

 

 

클래스 이름을 두 개 이상 적용

CSS Module을 사용한 클래스 이름을 두 개 이상 적용

{style.container style.title} 안 됨!

 

 

실습) 클래스 이름을 두 개 이상 적용

 

CSSModule.module.css

 

CSSModule.js

 

실행 결과

 

Sass와 함께 사용하기

CSS Module + Sass

 

• 사용 방법

파일이름.module.scss

 

 

실습) CSS Module + Sass

 

CSSModule.module.scss

global span은 다른 블록에 담아 주어야 함

 

 

CSSModule.js

 

실행 결과

 

styled-components

styled-components

• 자바스크립트 파일 안에 스타일을 선언하는 방식

    CSS-in-JS

• 별도의 스타일 파일을 만들지 않아도 스타일 작성 가능

• https://styled-components.com/

styled-components

• 설치

npm install styled-components

 터미널에 입력

 

vscode-styled-components 플러그인 설치

 

vscode-styled-components 플러그인 설치

 

styled-components

스타일 작성 방법

 

예시

 

스타일 적용 방법

 

예시

 

 

실습) styled-components

 

App.js

 

실행 결과

 

 

styled-components

props 값에 따라 스타일 적용

• 예) props 값이 primary이면 white, 아니면 red를 적용

 

• 스타일 작성

• 스타일 적용

 

 

실습) styled-components + props

 

App.js

 

실행 결과

클래스마다 다른 값을 가질 수 있다

 

비교

CSS Module vs Styled Components

	CSS Module	Styled Components
성능	Pure CSS	CSS in JS
사용 범위	어디서든 사용 가능	React, React-Native
특징	독립성	독립성 JS 파일에서 작성

css module은 큰 프로젝트에서 사용하기 어려움 코드가 길어지고 클래스 중첩될 가능성 있음 (로직이 섞임)

 

 

 

 

 

새싹DT 기업연계형 프론트엔드 실무 프로젝트 과정 7주차 블로그 포스팅