인라인 스타일링과 CSS 클래스 사용

리액트 애플리케이션의 시각적인 부분을 담당하는 스타일링 기법을 이번 장에서 비교합니다. 사용자 경험(UX)에서 UI의 미적 요소는 매우 중요합니다.

1

인라인 스타일링과 CSS 클래스 사용 흐름

리액트 컴포넌트에 스타일을 적용하는 주요 방법들은 다음과 같습니다.

2

인라인 스타일링 (Inline Styling)

React 인라인 스타일은 CSS를 JavaScript 객체로 전달합니다.

3

CSS 클래스 (CSS Classes)

CSS 클래스를 사용하는 것은 웹 개발에서 가장 보편적인 스타일링 방법입니다.

4

App.js에서 예제 컴포넌트 렌더링

App.js에서 인라인 스타일 예제와 CSS 클래스 예제를 나란히 렌더링해 스타일 적용 위치와 재사용성을 비교합니다.

5

인라인 스타일과 클래스의 책임 경계

스타일은 컴포넌트 구조와 함께 읽히므로, 동적 값과 재사용 규칙을 분리해 두어야 합니다.

핵심인라인 스타일링과 CSS 클래스 사용은 각 요소의 관계와 선택 조건을 함께 읽어야 한다.