React 스타일링 방식 선택 기준
스타일 위치보다 변경 방식, CSS 기능 사용 범위, 재사용 단위를 기준으로 고르면 실전 코드가 덜 흔들린다.
값이 컴포넌트 상태에서 바로 결정될 때
버튼 활성 색상, 계산된 너비, 한 요소에만 필요한 작은 스타일처럼 JavaScript 값과 강하게 묶인 경우에 적합하다.
표준 CSS 기능과 재사용이 중요할 때
hover, media query, transition, 반복되는 레이아웃 규칙은 CSS 클래스에 두면 JSX 구조가 더 선명하게 남는다.
변경 원천
props나 state가 값을 직접 만들면 인라인, 화면 상태를 표현하는 이름이 필요하면 클래스가 읽기 쉽다.
CSS 기능
선택자, 반응형 규칙, 가상 상태를 써야 하면 일반 CSS 기능을 그대로 활용하는 편이 낫다.
규모 관리
클래스가 늘어나 전역 충돌이 보이면 CSS 모듈이나 네이밍 규칙으로 다음 단계의 경계를 만든다.
핵심React 스타일링 방식 선택 기준은 각 요소의 관계와 선택 조건을 함께 읽어야 한다.