[React] style 주기

React에서의 스타일링과 CSS: JSX의 차별점 이해하기

React를 사용하면서 만나게 되는 JSX는 자바스크립트를 확장한 문법으로, HTML과 비슷해 보이지만 몇 가지 중요한 차이점이 있다.
그 중에서 style 관련된 차별점에 대해 정리해보겠다.

💡 CSS 파일 연결하기

HTML에서는 "link" 태그를 사용하여 외부 CSS 파일을 연결하지만, React의 JSX에서는 import 문을 사용하여 CSS 파일을 직접 가져온다.

import './App.css'; // CSS 파일 경로

이렇게 import 문을 사용하면 해당 컴포넌트에서 CSS 스타일을 적용할 수 있다.

💡 클래스 이름 지정하기

HTML에서는 요소에 클래스를 추가할 때 class 속성을 사용한다. 그러나 JSX에서는 class 대신 className을 사용해야 한다. 이는 JavaScript의 'class'문법과 충돌을 피하기 위함이다.

<div className="btn"></div>

id 속성은 HTML과 동일하게 id="idName" 형식으로 사용된다.

💡 인라인 스타일 적용하기

HTML에서는 스타일을 직접 태그에 적용할 때 style 속성을 문자열로 작성한다. 하지만 JSX에서는 스타일을 객체 형태로 작성해야 하며, CSS 속성명은 카멜 케이스(camelCase)를 사용한다. 이는 CSS 속성명 중 하이픈(-)이 JavaScript에서는 빼기 연산자로 해석되기 때문이다.

<h4 style={{ color: '#000', fontSize: '20px' }}>블로그</h4>

위 예시에서는 폰트 색상을 검정색으로, 폰트 크기를 20px로 설정한다. 각 속성은 쉼표로 구분하여 객체 내에 여러 스타일을 동시에 적용할 수 있다.