[React]리액트 에서 인라인 스타일 적용하기

React를 사용하다 보면 CSS 클래스를 따로 작성하는 대신, 간단한 스타일을 인라인으로 적용해야 할 때가 종종 있습니다.

그럴 때 사용하는 방식이 바로 인라인 스타일입니다. 하지만 React에서는 일반 HTML과는 조금 다르게 작성됩니다. 

기본 HTML vs React에서의 인라인 스타일 작성

/*기본 html*/
<h2 style="color: red; font-size: 20px;">Hello</h2>

/*React*/
<h2 style={{ color: 'red', fontSize: '20px' }}>Hello</h2>

 

차이점 

 

• 속성 이름 카멜 표기법(font-size → fontSize) 
• 전체 스타일이 중괄호 2개({{ ... }}) 로 감싸짐

리액트 인라인 스타일 특징 

• style={ ... }: JSX에서는 style 속성에 자바스크립트 객체를 넘겨줘야 하므로 중괄호 한 쌍이 필요합니다.
• 객체 자체도 또 { color: 'red', fontSize: '20px' }처럼 생겼기 때문에, 결국 중괄호가 두 겹으로 들어가는 거죠.

 

 

 

예시 

<button style={{ backgroundColor: '#333', color: '#fff', padding: '10px 20px' }}>
  클릭하세요
</button>

 

 

인라인 스타일이 유용한 경우:

• 아주 짧고 단순한 스타일을 적용할 때
• 조건부로 스타일을 바꿔야 할 때 (예: 버튼 클릭 시 색 변경)
• 외부 CSS 파일 없이 빠르게 테스트할 때

주의할 점:

• 복잡한 스타일에는 적합하지 않습니다.
• CSS 모듈이나 styled-components처럼 유지보수에 더 유리한 방식을 고려하는 게 좋습니다.

 

 

 

* React에서 클래스(className) 주는 법 정리  - https://lionbum.tistory.com/272

// 일반 CSS
import './styles.css';
<h2 className="title">Hello</h2>

// CSS 모듈
import styles from './MyComponent.module.css';
<h2 className={styles.title}>Hello</h2>