React에서 인라인 스타일로 배경색 설정

1. React의 인라인 스타일
2. React에서 인라인 스타일로 배경색 설정
3. 결론

스타일과 클래스를 동적으로 적용하는 기능은 React의 가장 좋은 기능 중 하나입니다. 이 기사에서는 React에서 배경색을 변경하기 위해 인라인 스타일을 설정하는 방법에 대해 설명합니다.

React의 인라인 스타일

인라인 스타일을 사용하면 React의 템플릿 언어인 JSX 내에서 직접 요소의 스타일을 지정할 수 있습니다. React 애플리케이션을 쉽게 구조화하는 데 도움이 됩니다.

HTML에서와 마찬가지로 React에서도 인라인 스타일을 적용할 수 있습니다. 그러나 인라인 스타일과 CSS 스타일 간에는 몇 가지 차이점이 있습니다.

JSX는 HTML과 매우 비슷해 보이지만 JavaScript 작성을 위한 구문 설탕입니다. 이러한 이유로 모든 CSS 규칙은 JavaScript 개체로 형식이 지정되어야 합니다.

개별 스타일은 개체의 키-값 쌍으로 작성해야 합니다. 대시로 분리되는 CSS 속성은 함께 푸시됩니다.

예를 들어 font-size CSS 속성은 fontSize가 됩니다. 이러한 속성의 값은 문자열, 정수 또는 부울이어야 합니다.

React에서 인라인 스타일로 배경색 설정

우리가 언급한 규칙에 따르면 CSS 속성 background-color는 React 인라인 스타일에서 backgroundColor가 됩니다. 이 속성의 값은 문자열이거나 이름이 지정된 색상이어야 합니다.

통사론:

<div style={{ backgroundColor: "red"}}></div>

또는 CSS에서와 마찬가지로 HEX 코드 또는 RGBA를 사용할 수 있습니다.

<div style={{ backgroundColor: "#ff0000"}}></div>

React에서 인라인 스타일을 적용하는 방법에 대한 예를 들어 보겠습니다.

코드 조각:

import "./styles.css";

export default function App() {
  return <div style={{ backgroundColor: "red", padding: 100 }}></div>;
}

출력:

라이브 데모를 보려면 CodeSandbox로 이동하세요. React 인라인 스타일은 요소를 검사하면 일반 CSS로 변환됩니다.

결론

많은 초보자들이 React의 인라인 스타일 구문과 혼동합니다. 중요한 것은 여러 단어 이름을 가진 CSS 속성이 결합되어 CamelCase임을 기억해야 합니다.

또한 속성 이름은 문자열일 필요가 없습니다. 마지막으로 값은 문자열, 정수 또는 부울이어야 합니다.