리액트 컴포넌트 스타일링 — Inline 스타일 적용하기 (특징 · 문법 · 장단점 · 조건부 스타일링)

바닐라 CSS는 단순하고 익숙하지만 React에서는 스타일이 전역 스코프를 가지는 문제가 있다.
이를 해결하는 한 가지 방법이 바로 Inline 스타일이다.
Inline 스타일은 특정 요소에만 스타일이 적용되기 때문에 스타일 충돌을 완전히 막을 수 있다.

이번 글에서는 Inline 스타일의 기본 사용법부터 장단점, 그리고 동적 · 조건부 스타일링까지 한 번에 정리한다.

1. Inline 스타일이란?

CSS 파일을 따로 만들지 않고, JSX 요소의 style prop에 직접 스타일 객체를 넣는 방식이다.

HTML의 style="color: red"와 비슷해 보이지만, React에서는 문자열이 아닌 JS 객체를 전달해야 한다.

2. Inline 스타일 문법

HTML 방식 ❌

<p style="color: red;">Text</p>

React 방식 ⭕️

<p style={{ color: 'red' }}>Text</p>

여기서 {{}}는 특별한 문법이 아니라
바깥 {} : JSX에서 동적 값 사용
안쪽 {} : 실제로 전달되는 JS 객체
이다.

3. camelCase로 작성해야 함

CSS의 text-align, background-color 같은 속성은 JS 객체의 key로 사용할 수 없으므로 camelCase로 표기해야 한다.

<p style={{ textAlign: 'left', backgroundColor: '#eee' }}>Text</p>

4. Inline 스타일의 장점

1) 완전한 컴포넌트 스코프

• Inline 스타일은 적용된 요소에만 영향을 주므로 전역 스타일 충돌이 일어나지 않는다.

2) 빠르게 스타일 적용 가능

• 간단한 테스트나 특정 요소만 스타일링할 때 매우 빠름.

3) 동적 · 조건부 스타일링과 궁합 최고

• JS 코드를 활용해 조건에 따라 스타일을 쉽게 바꿀 수 있다. (아래에서 자세히 설명)

5. Inline 스타일의 단점

1) 중복 증가

• 같은 스타일을 여러 요소에 적용하려면 style={{ ... }}를 반복해야 한다.

2) 유지보수 어려움

• 디자인을 변경할 때 JSX 파일 전체에서 스타일을 직접 찾아 수정해야 한다.

3) CSS와 JS 코드가 섞임

• 파일이 지저분해지고, 디자이너와 개발자의 협업이 힘들어진다.

4) CSS 기능 제한

• :hover, media query 등 일부 CSS 기능은 Inline 스타일만으로 구현이 어렵다.

🎉 6. Inline 스타일로 조건부 · 동적 스타일링하기

Inline 스타일의 진짜 장점은 조건에 따라 스타일을 쉽게 바꿀 수 있다는 점이다.

아래는 로그인 폼에서 이메일이 유효하지 않을 때 배경색을 붉게 바꾸는 예시다.

<input
  style={{
    backgroundColor: !emailIsValid
      ? '#fddddd' // invalid일 때 붉은 톤
      : '#f3f3f3' // 기본 배경색
  }}
/>

조건은 삼항 연산자로 처리.
!emailIsValid가 true일 때 붉은색 적용, false일 때 기본 색상 적용.
즉, 로그인 버튼을 클릭하면 invalid input에만 배경색이 바뀐다.

---

하지만 Inline 스타일은 중복과 관리 문제 때문에 이상적인 방식은 아니다.
대부분은 조건부 className 방식이나 다른 스타일링 기법을 함께 사용한다.