React에서 CSS (Invalid Property Value)속성 값 문제 해결
React 컴포넌트에 스타일을 적용하는 것은 시각적으로 매력적인 사용자 인터페이스를 만드는 핵심적인 부분입니다. React에서는 CSS 파일을 가져와 className 속성을 사용하여 컴포넌트에 스타일을 적용할 수 있습니다.
React에서 CSS 파일 가져오기
React 컴포넌트에서 CSS 파일을 가져와 사용하려면 webpack과 같은 빌드 도구를 설정하여 CSS 파일을 처리해야 합니다. 예시 webpack 설정을 확인해보겠습니다:
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
mode: "development",
entry: "../src/index.js",
output: {
path: path.resolve(__dirname, "../dist"),
filename: "bundle.js",
},
devtool: 'inline-source-map',
devServer: {
contentBase: '../dist',
port: 8080
},
module: {
rules: [
{
test: /\.js$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env', '@babel/preset-react']
}
}
},
{
test: /\.css$/,
use: [ 'style-loader', 'css-loader' ]
}
]
},
plugins: [new HtmlWebpackPlugin({
template: '../src/index.html'
})]
};
위의 설정에는 CSS 파일을 처리하기 위한 필요한 로더인 style-loader와 css-loader가 포함되어 있습니다. 이 구성이 완료되면 React 컴포넌트에서 CSS 파일을 가져올 수 있습니다.
React 컴포넌트에 스타일 적용하기
예를 들어 App이라는 이름의 React 컴포넌트에 CSS 스타일을 적용하려고 합니다. 컴포넌트 파일 내에서 CSS 파일을 가져와 className 속성을 사용하여 스타일을 적용할 수 있습니다:
import React from "react";
import "./App.css";
const App = () => (
<div className="hello-world">Hello World</div>
);
export default App;
위의 예시에서는 CSS 파일 App.css를 가져와 className 속성을 사용하여 div 요소에 CSS 클래스 hello-world를 적용합니다.
‘잘못된 속성 값’ 오류
스타일을 적용한 후 개발 도구에서 CSS 파일의 색상 값을 "#272C35"가 잘못 표시된 것을 알게 됩니다. 이 오류의 원인은 색상 값을 따옴표로 감싸서 넣은 것입니다. CSS에서는 색상 값을 따옴표로 감싸지 않습니다.
‘잘못된 속성 값’ 오류를 해결하려면 CSS 파일에서 색상 값을 따옴표를 제거하세요:
.hello-world {
color: #272C35;
}
따옴표를 제거하면 색상 값을 올바르게 인식하고 hello-world 클래스에 적용됩니다.
결론
이 블로그 글에서는 React에서 가져온 CSS 파일을 사용하여 컴포넌트에 스타일을 적용할 때 ‘잘못된 속성 값’ 오류를 해결하는 방법에 대해 알아보았습니다. 따옴표로 둘러싸인 색상 값이 오류의 원인인 것을 확인했습니다. 권장하는 방법을 따라 따옴표를 제거하면 원하는 CSS 스타일을 React 컴포넌트에 성공적으로 적용할 수 있습니다.
항상 CSS 구문이 올바르고 정해진 규칙을 따르도록 하여 이와 같은 일반적인 스타일링 오류를 피하는 것을 기억하세요.
참고 자료 :
같은 카테고리의 다른 글 보기 :
