퍼블리싱
[React]리액트 에서 인라인 스타일 적용하기
lionbum
2025. 5. 26. 09:53
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>
728x90
반응형