스타일 선택 기준

인라인 스타일과 CSS 클래스 선택 기준

React 스타일링의 첫 선택지는 값이 컴포넌트 상태에 따라 바뀌는지, 여러 요소에서 같은 규칙을 재사용하는지에 따라 달라집니다.

인라인 스타일

JavaScript 객체로 작성해 state나 props에 따라 색상, 표시 여부 같은 값을 바로 바꿀 수 있습니다.

CSS 클래스

반복되는 레이아웃, 타이포그래피, 공통 버튼 스타일을 외부 CSS에서 관리합니다.

함께 사용

기본 모양은 클래스에 두고 특정 상태의 작은 차이만 인라인 값으로 덮어쓸 수 있습니다.

object

인라인 스타일 속성이 camelCase로 작성됐는지 확인한다.

class

JSX에서는 class 대신 className을 사용한다.

reuse

여러 곳에서 반복되는 스타일은 클래스로 분리한다.

dynamic

상태에 따라 바뀌는 값인지 먼저 판단한다.