[javascript] 리액트 프레임워크에서 스타일링은 어떻게 처리하나요?

05 Dec 2023

javascript

리액트 프레임워크에서 스타일링을 처리하는 방법은 여러 가지가 있습니다. 가장 일반적인 방법은 CSS를 사용하여 스타일을 적용하는 것입니다. 리액트는 기본적으로 CSS 파일을 로드하고 클래스 이름을 통해 스타일을 적용할 수 있습니다.

먼저, 컴포넌트에서 스타일을 정의하기 위해 CSS 파일을 import합니다.

import './style.css';

그런 다음, 해당 컴포넌트 내에서 클래스 이름을 지정하여 스타일을 적용할 수 있습니다.

render() {
  return (
    <div className="myComponent">
      <h1 className="title">Hello, React!</h1>
    </div>
  );
}

이렇게 정의된 클래스 이름에 해당하는 스타일은 CSS 파일에서 설정할 수 있습니다.

.myComponent {
  background-color: #f1f1f1;
  padding: 10px;
}

.title {
  font-size: 20px;
  color: blue;
}

이와 같이 CSS 파일을 사용하면 컴포넌트의 스타일을 쉽게 관리할 수 있습니다. 또한, CSS 프레임워크인 Bootstrap 등을 사용하여 미리 정의된 스타일을 적용할 수도 있습니다.

다른 방법으로는 인라인 스타일링을 사용하는 것도 있습니다. 이 방법은 컴포넌트 내에서 직접 스타일을 정의하는 방식입니다.

render() {
  const myStyle = {
    backgroundColor: '#f1f1f1',
    padding: '10px'
  };

  const titleStyle = {
    fontSize: '20px',
    color: 'blue'
  };

  return (
    <div style={myStyle}>
      <h1 style={titleStyle}>Hello, React!</h1>
    </div>
  );
}

인라인 스타일링을 사용하면 컴포넌트 내에서 스타일을 동적으로 변경할 수 있는 장점이 있지만, 코드의 가독성이 떨어질 수 있으므로 적절히 사용해야 합니다.

이외에도 CSS 모듈, CSS-in-JS 등 다양한 스타일링 방식을 리액트에서 사용할 수 있습니다. 개인적인 선호도나 프로젝트의 요구에 따라 적합한 방식을 선택하여 스타일링을 처리할 수 있습니다.

참고 자료