컴포넌트 스타일링 - 2

Post CSS

Post CSS

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

파일이름_클래스이름_해시값

• 사용 방법

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

    파일이름.module.css

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

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

Sass와 함께 사용하기

• CSS Module + Sass

  • 사용 방법

    파일이름.module.scss

styled-components

styled-components

• 자바스크립트 파일 안에 스타일을 선언하는 방식
  • CSS-in-JS
• 별도의 스타일 파일을 만들지 않아도 스타일 작성 가능
• https://styled-components.com/
• 설치

$ npm install styled-components

vscode-styled-components 플러그인 설치

스타일 작성 방법

const 스타일_저장_변수이름 = styled.태그이름` 
	// 스타일 작성
`;

• 예시

const Container = styled.div` 
	background: black; 
	padding: 1rem;
	font-size: 2rem;
	color: white;
`;

스타일 적용 방법

return (
	<스타일컴포넌트명/> 
);

• 예시

return (
    <Container />
);

props 값에 따라 스타일 적용

• 예) props 값이 primary이면 white, 아니면 red를 적용
• 스타일 작성

color: ${(props) => (props.primary ? "white" : "red")};

• 스타일 적용

<Button>Normal</Button>
<Button primary>Primary</Button>

비교

CSS Module과 Styled Components 비교

	CSS Module	Styled Components
성능	Pure CSS	CSS in JS
사용 범위	어디서든 사용 가능	React, React-Native
특징	독립성 파일이 많고, 태그가 다양하고, 스타일을 많이 쓰는 큰 프로젝트에 적합 순수 CSS를 사용하기 때문에 별도의 공부가 필요하지 않음	독립성 JS 파일에서 작성 큰 프로젝트에는 적합하지 않음 코드가 길어짐 파일 분리 불가

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