styled-components 스타일 경계

CSS-in-JS 방식은 스타일 정의를 컴포넌트 파일 가까이에 두고 props 변화가 className이나 CSS 규칙으로 바뀌는 경로를 코드에 묶습니다.

styled-components 스타일 경계CSS-in-JS 방식은 스타일 정의를 컴포넌트 파일 가까이에 두고 props 변화가 className이나 CSS 규칙으로 바뀌는 경로를…
1

설치와 import

styled-components를 설치한 뒤 styled.button, styled.div 같은 형태로 스타일 컴포넌트를 만듭니다.

2

기본 사용

템플릿 리터럴 안에 CSS를 작성하고 만든 컴포넌트를 JSX에서 일반 컴포넌트처럼 씁니다.

3

동적 스타일

props를 읽어 active, size, variant 같은 시각 차이를 조건부로 적용합니다.

4

styled

스타일 컴포넌트 이름이 화면 역할을 설명하는지 본다.

5

props

스타일 전용 props가 DOM 속성으로 새지 않는지 확인한다.

핵심styled-components 스타일 경계은 각 요소의 관계와 선택 조건을 함께 읽어야 한다.