[React] style Prop 사용하여 Inline(인라인)으로 css 적용하기

이 글은 Udemy의 【한글자막】 React 완벽 가이드 2025 with React Router & Redux 를 수강하고 정리한 내용입니다.

style Prop을 사용해서 CSS를 자바스크립트 객체로 작성하여 JSX에서 스타일을 적용할 수 있습니다. 이 방법을 통해 간단한 스타일링이나, 동적인 스타일 변경을 할 때 사용 가능 합니다.

style Prop 기본 사용법

1. CSS 속성 이름은 camelCase로 작성
2. 값은 문자열 또는 숫자로 작성

function App() {

  return (
    <div>
      <button 
        style={{
          backgroundColor: 'red',  // 고정된 색상
          color: 'white',
          padding: '10px 20px',
          border: 'none',
          cursor: 'pointer'
        }} 
      >
        Click me!
      </button>
    </div>
  );
}

export default App;

1. 동적 스타일링 가능

import React, { useState } from 'react';

function App() {
  // useState 훅을 사용하여 isClicked 상태를 정의합니다. 초기 값은 false입니다.
  const [isClicked, setIsClicked] = useState(false);

  // 버튼 클릭 시 호출되는 함수입니다. 상태를 반전시켜 isClicked 값을 변경합니다.
  const handleClick = () => {
    setIsClicked(prev => !prev); // 이전 상태의 반대로 값을 변경합니다.
  };

  // 버튼 스타일을 동적으로 생성합니다. isClicked 상태에 따라 배경색이 바뀝니다.
  const buttonStyle = {
    backgroundColor: isClicked ? 'green' : 'red', // 상태에 따라 배경색을 green 또는 red로 설정
    color: 'white', 
    padding: '10px 20px',
    border: 'none', 
    cursor: 'pointer'
  };

  return (
    <div>
      {/* label 태그는 버튼을 설명하는 텍스트를 포함합니다. 
           isClicked 상태에 따라 'clicked' 클래스를 동적으로 추가 */}
      <label className={`label ${isClicked ? 'clicked' : ''}`}>Button</label>

      {/* 버튼은 style prop을 사용하여 동적으로 스타일을 적용하고, 
           클릭 시 handleClick 함수가 호출되어 isClicked 상태가 변경됩니다. */}
      <button style={buttonStyle} onClick={handleClick}>
        {/* 버튼 텍스트는 isClicked 상태에 따라 'Clicked' 또는 'Click me!'로 변경 */}
        {isClicked ? 'Clicked' : 'Click me!'}
      </button>
    </div>
  );
}

export default App;

style Prop 사용 시 장점

1. 컴포넌트 내에서 간편한 스타일링
2. 동적 스타일 적용
3. 외부 라이브러리 의존성 없음

style Prop 사용 시 단점

1. 스타일 재사용 어려움
2. 성능 이슈
   • 매번 새로운 스타일 객체가 생성되어 리렌더링 성능에 영향을 미칠 수 있다.
3. 복잡한 스타일링에 한계
4. 스타일 객채와 jsx의 상태와 강한 의존성

 

 

도움이 되셨다면 ❤️ 좋아요와 댓글로 피드백 주세요!

궁금한 점이 있다면 언제든지 질문 환영입니다 😄

지금까지 읽어주셔서 감사합니다!