방방이네 블로그

리액트에서 동적인 스타일링을 적용하는 방법은 여러 가지가 있습니다. 그 중 가장 일반적인 방법은 인라인 스타일링, CSS 모듈, 그리고 styled-components를 사용하는 것입니다. 각각의 방법에 대해 설명드리겠습니다.

1. 인라인 스타일링

리액트에서는 스타일을 객체 형태로 인라인으로 적용할 수 있습니다. 스타일 속성은 CamelCase로 작성되어야 합니다.

import React from 'react';

function App() {
  const isRed = true;

  const style = {
    color: isRed ? 'red' : 'blue',
    backgroundColor: 'lightgray',
    padding: '10px'
  };

  return (
    <div style={style}>
      동적인 스타일링 예제
    </div>
  );
}

export default App;

2. CSS 모듈

CSS 모듈을 사용하면 각 컴포넌트마다 고유한 CSS 클래스를 정의할 수 있습니다. 파일 확장자는 .module.css를 사용합니다.

// App.module.css
.red {
  color: red;
}

.blue {
  color: blue;
}

// App.js
import React from 'react';
import styles from './App.module.css';

function App() {
  const isRed = true;

  return (
    <div className={isRed ? styles.red : styles.blue}>
      동적인 스타일링 예제
    </div>
  );
}

export default App;

3. styled-components

styled-components 라이브러리를 사용하면 자바스크립트 파일 안에서 CSS를 작성할 수 있습니다. 조건부 스타일링도 쉽게 할 수 있습니다.

npm install styled-components

// App.js
import React from 'react';
import styled from 'styled-components';

const DynamicDiv = styled.div`
  color: ${props => (props.isRed ? 'red' : 'blue')};
  background-color: lightgray;
  padding: 10px;
`;

function App() {
  const isRed = true;

  return (
    <DynamicDiv isRed={isRed}>
      동적인 스타일링 예제
    </DynamicDiv>
  );
}

export default App;

이 세 가지 방법 외에도 classnames 라이브러리 등을 사용하여 클래스를 동적으로 조합할 수도 있습니다. 선택한 방법은 프로젝트의 요구사항과 팀의 선호도에 따라 달라질 수 있습니다.