자바스크립트 객체로 스타일을 넘기므로 조건에 따라 색상이나 크기를 즉시 계산할 수 있습니다.
스타일 선택 기준
인라인 스타일과 CSS 클래스
React에서 스타일은 작성 위치보다 어떤 값이 동적인지, 어떤 규칙이 반복되는지에 따라 선택하는 편이 안전합니다.
상태와 무관한 반복 스타일은 CSS 파일에 두어 hover, media query, 공통 규칙을 활용합니다.
동적 계산은 컴포넌트 안에, 시각 체계는 CSS에 두면 변경 이유가 분리됩니다.
런타임 값으로 달라지는 스타일인지 확인한다.
hover나 focus 같은 상태가 필요하면 CSS 클래스를 고려한다.
여러 요소가 공유하면 className으로 빼는 편이 좋다.
스타일 파일과 컴포넌트 파일의 책임을 나눠 본다.