Typescript와 웹팩을 이용한 리액트 컴포넌트에서 CSS Modules 사용하기
Typescript와 웹팩을 이용하여 개발 중인 리액트 프로젝트에서 컴포넌트 스타일링을 위해 CSS Modules를 활용하고자 한다면 몇 가지 문제가 발생할 수 있습니다. 이 블로그 글에서는 Typescript로 작성된 리액트 애플리케이션에서 CSS Modules를 설정하고 사용하는 과정을 안내하겠습니다.
웹팩 설정하기
처음으로 해야 할 일은 웹팩 설정에서 css-loader를 ‘modules’ 옵션을 사용하여 CSS 파일을 처리하도록 구성하는 것입니다. 이 옵션을 사용하면 CSS Modules를 활성화할 수 있으며, 클래스 이름 충돌을 방지하고 스타일의 범위를 격리할 수 있는 기능을 제공합니다.
var webpack = require('webpack');
var path = require('path');
var ExtractTextPlugin = require("extract-text-webpack-plugin");
module.exports = {
// ...
module: {
loaders: [
// ...
{
test: /\.css/,
exclude: /(node_modules|bower_components)/,
loader: ExtractTextPlugin.extract('style-loader', 'css-loader?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]!postcss-loader')
}
]
},
plugins: [
new ExtractTextPlugin("styles.css", {allChunks: true})
],
// ...
}
위의 웹팩 설정에서는 ‘modules’와 ‘importLoaders’ 옵션을 사용하여 css-loader를 활용하여 CSS Modules를 활성화합니다. 또한, postcss-loader를 사용하여 CSS 파일을 처리하도록 설정했습니다. 추가적으로, ExtractTextPlugin을 사용하여 CSS를 별도의 파일로 추출하도록 했습니다.
리액트 컴포넌트에서 CSS Modules를 import하고 사용하기
위의 웹팩 설정을 마친 후에는 리액트 컴포넌트에서 CSS Modules를 import하고 사용할 수 있습니다.
import React from 'react';
import styles from '../../../css/tree.css';
class Tree extends React.Component {
render() {
return (
<div>
<h3 className={styles.h3} >Components</h3>
<div id="tree" className="list-group">
{/* ... */}
</div>
</div>
);
}
}
export default Tree;
위 예시에서는 ‘styles’ 객체를 통해 CSS 파일을 import하고 있습니다. 이 ‘styles’ 객체는 자동으로 CSS Modules에 의해 생성되며, ‘styles’ 객체의 속성으로 개별 CSS 클래스에 접근할 수 있습니다.
Typescript에서 “Cannot find module” 오류 해결하기
Typescript에서 CSS 파일을 import하는 동안 “Cannot find module” 오류가 발생할 경우, import 문을 약간 수정하여 이 오류를 해결할 수 있습니다.
declare var require: {
<T>(path: string): T;
(paths: string[], callback: (...modules: any[]) => void): void;
ensure: (paths: string[], callback: (require: <T>(path: string) => T) => void) => void;
};
const styles = require<any>("../../../css/tree.css");
위 코드 스니펫에서는 ‘require’ 변수를 선언하여 Typescript 오류를 해결합니다. 그런 다음, 일반화된 타입을 지정하여 ‘require’ 문을 사용하여 CSS 파일을 import할 수 있습니다.
대체 가능한 솔루션
Typescript에서 ‘require’ 문을 사용하지 않으려는 경우, 대체 가능한 솔루션을 사용할 수 있습니다:
- import 문 사용: ‘require’ 문 대신 import 문을 약간 수정하여 사용할 수 있습니다.
import '../../../css/tree.css';
결론
이 블로그 글에서는 Typescript와 웹팩을 이용하여 작성한 리액트 애플리케이션에서 CSS Modules를 설정하고 사용하는 과정을 다루었습니다. 웹팩을 설정하여 CSS Modules를 활성화하는 방법과 리액트 컴포넌트에서 CSS Modules를 import하고 사용하는 방법을 살펴보았습니다. 또한, Typescript에서 CSS 파일을 import할 때 발생할 수 있는 “Cannot find module” 오류를 해결하는 다양한 솔루션에 대해서도 알아보았습니다. CSS Modules를 활용함으로써, 리액트 컴포넌트의 스타일링에 범위와 모듈의 개념을 도입하여 코드의 가독성과 재사용성을 향상시킬 수 있습니다.
