이 글에선, 컴포넌트를 스타일링 하는 방법에 대해 알아봅니다.
1. Style Loaders
- create-react-app은 webpack 기반으로 동작하고, style-loader와 css-loader가 기본으로 설치/설정되어 있습니다.
- 따라서, css-loader를 사용해 JS 파일에서 CSS 파일을 로드할 수 있고,
- style-loader를 사용해 CSS 빌드 결과물을 <style> 태그에 삽입할 수 있습니다.
- create-react-app의 자세한 webpack 설정은 '$ npm run eject' 명령어로 create-react-app을 제거해서 확인할 수 있습니다.
$ npx create-react-app style-test
$ cd style-test
/* App.js */
import logo from './logo.svg';
import './App.css'; // JS 파일에서 CSS를 import 하고 있습니다. 이는 css-loader라는 패키지 덕분에 가능합니다.
function App() {
...
}
Sass(SCSS)
- create-react-app에 sass-loader는 포함되어 있지만, scss 파일을 css 파일로 컴파일하는 sass 컴파일러는 없습니다.
- 따라서, sass 컴파일러를 별도로 설치해서 사용해야 합니다.
$ npm i -D sass
.scss 파일을 생성 후 import
/* App.js */
import logo from './logo.svg';
import './App.scss';
function App() {
...
}
- 빌드하면 아래의 과정을 거쳐, HTML에 적용됩니다.
- sass-loader가 scss 파일을 로드
- sass 컴파일러가 css 파일로 컴파일
- css-loader가 이 파일을 로드
- style-loader가 HTML에 <style>로 삽입
2. CSS Module
CSS 모듈 파일명은 .module.css 확장자로 만들어야 합니다. 이유는 create-react-app의 webpack 설정 때문입니다.
다음으로 CSS 모듈 파일을 생성하고, 아래와 같이 import 해서 console.log로 결과물을 print 해봤습니다.
import logo from './logo.svg';
import './App.css';
import styles from './App.module.css';
console.log( styles );
function App() {
return (
<div className={styles['App']}>
...
)
}
모듈이 Object를 export 하는 걸 알 수 있습니다.
- Object의 key는 CSS에서 정의했던 클래스 이름입니다.
- Object의 value는 "JS 파일명.CSS Module 파일명.hash 값"을 조합하여 생성됩니다.
- 이제 Object의 value를 class 명으로 사용하면, '거의' 독립적인 스타일로 적용이 가능하게 됩니다.
3. Styled Componenets
1) styled-component 설치
$ npm i styled-component
2)기본 사용법
/* App.js */
import logo from './logo.svg';
import './App.css';
import StyledButton from './components/StyledButton';
function App() {
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<p>
Edit <code>src/App.js</code> and save to reload.
</p>
<StyledButton>버튼~</StyledButton>
</header>
</div>
);
}
export default App;
/* StyledButton.jsx */
import styled from 'styled-components';
const StyledButton = styled.button`
background: red;
color: white;
`;
export default StyledButton;
- import 한 styled 컴포넌트에 템플릿 스트링으로 CSS Style을 지정할 수 있습니다.
3) 템플릿 문자열에 JS 표현식 삽입
/* App.js */
import logo from './logo.svg';
import './App.css';
import StyledButton from './components/StyledButton';
function App() {
return (
<div className="App">
<header className="App-header">
...
<StyledButton color="white" active>버튼~</StyledButton>
</header>
</div>
);
}
export default App;
/* StyledButton.jsx */
import styled from 'styled-components';
const StyledButton = styled.button`
background: red;
color: ${props.color};
${(props) => props.active && `
background: blue;
`}
`;
export default StyledButton;
- props에 active가 있으면 background를 blue로 수정합니다.
4) as 속성 사용
/* App.js */
import logo from './logo.svg';
import './App.css';
import StyledButton from './components/StyledButton';
function App() {
return (
<div className="App">
<header className="App-header">
...
<StyledButton as="a" href="/">버튼~</StyledButton>
</header>
</div>
);
}
export default App;
- 버튼이 <a> 태그처럼 동작하도록 만들 수 있습니다.
- 브라우저에서 요소를 검사하면, <button>이 아닌 <a>로 만들어지는 걸 확인할 수 있습니다.
4. React Shadow
- Shadow DOM을 이용해, 상위 CSS 스타일로부터 독립시키고 싶을 때 사용합니다.
- Shadow DOM은 외부에 노출되지 않는 캡슐화된 DOM을 의미합니다. ex) <iframe>
react-shadow 설치
$ npm i react-shadow
react-shadow 사용
import 'root' from 'react-shadow';
const styles = `
.App {
background: black;
...
}
...
`;
function App() {
return (
<root.div>
<div className="App">
...
</div>
<style type="text/css">{styles}</style>
</root.div>
)
}
5. Ant Design
- UI/UX를 쉽게 구현할 수 있게 해주는 프론트엔드 프레임워크입니다.
Ant Design 설치
$ npm i antd
Ant Design 사용
import "antd/dist/antd.css";
import { Calendar } from 'antd';
function App() {
return (
<div className="App">
...
<Calendar />
</div>
);
}
