인라인 스타일링
style={{ color, padding }}
강점state와 props로 즉시 계산
스타일을 어디에 둘지 한계hover, media query, 재사용 규칙에 약함
사용처작은 조건부 색상, 임시 수치
Styling Basics
인라인 스타일은 값 계산에 가깝고, CSS 클래스는 시각 규칙과 재사용에 가깝습니다.
style={{ color, padding }}
강점state와 props로 즉시 계산
스타일을 어디에 둘지 한계hover, media query, 재사용 규칙에 약함
사용처작은 조건부 색상, 임시 수치
className="my-button primary"
강점표준 CSS 기능과 반복 스타일 재사용
스타일을 어디에 둘지 한계전역 클래스 충돌 관리가 필요
사용처컴포넌트 레이아웃, hover, 반응형
선택 규칙: 값이 렌더링 데이터에서 바로 나오면 인라인으로 작게 처리하고, 화면 규칙으로 오래 남을 스타일은 CSS 클래스로 분리합니다.