React styling

style 객체와 className 비교

인라인 스타일링은 JSX의 `style` prop에 JavaScript 객체를 넘기고, CSS 클래스는 별도 CSS 파일의 선택자를 `className`으로 연결한다. 두 방식의 차이는 코드 위치보다 적용 경로와 CSS 기능 사용 범위에서 드러난다.

style prop

동적 값이 요소에 직접 적용

1

객체 속성은 camelCase로 작성

`background-color` 대신 `backgroundColor`처럼 JavaScript 객체 문법에 맞춘다.

const buttonStyle = { backgroundColor: isActive ? 'green' : 'gray' }
2

조건부 색상처럼 작은 동작에 적합

props나 state에 따라 배경색, 글자색, 간격을 즉시 바꾸는 경우에는 읽기 쉽다.

className

CSS 파일의 선택자와 연결

1

JSX에는 구조, CSS에는 표현

`import './CssClassesExample.css'` 후 `className="my-button primary"`처럼 여러 클래스를 조합한다.

<button className="my-button primary">기본 버튼</button>
2

hover, media query, 재사용에 강함

가상 클래스와 미디어 쿼리를 그대로 쓰고, 같은 규칙을 여러 컴포넌트에서 재사용할 수 있다.