React
스타일 지정
React with CSS를 스타일화하는 방법에는 여러 가지가 있다.
이 튜토리얼에서는 다음 세 가지 일반적인 방법에 대해 자세히 알아보자.
- 인라인 스타일링
- CSS 스타일시트
- CSS 모듈
인라인 스타일링
인라인 스타일 속성을 사용하여 요소의 스타일을 지정하려면 값이 JavaScript 객체여야 한다.
예제
const Header = () => {
return (
<>
<h1 style={{color: "red"}}>Hello Style!</h1>
<p>Add a little style!</p>
</>
);
}
⭐ JSX에서 JavaScript 표현식은 중괄호 안에 작성되며 JavaScript 객체도 중괄호를 사용하므로 위 예제의 스타일은 두 세트의 중괄호 {{}} 안에 작성된다.
camelCased 속성 이름
인라인 CSS는 JavaScript 객체로 작성되므로 background-color와 같은 하이픈 구분 기호가 있는 속성은 카멜 케이스 구문으로 작성해야 한다.
예제
background-color 대신 backgroundColor를 사용한다.
const Header = () => {
return (
<>
<h1 style={{backgroundColor: "lightblue"}}>Hello Style!</h1>
<p>Add a little style!</p>
</>
);
}
자바스크립트 객체
스타일 정보가 포함된 객체를 생성하고 스타일 속성에서 이를 참조할 수도 있다.
예제
const Header = () => {
const myStyle = {
color: "white",
backgroundColor: "DodgerBlue",
padding: "10px",
fontFamily: "Sans-Serif"
};
return (
<>
<h1 style={myStyle}>Hello Style!</h1>
<p>Add a little style!</p>
</>
);
}
CSS 스타일시트
CSS 스타일을 별도의 파일에 작성할 수 있다.
.css파일 확장자를 사용하여 파일을 저장하고 애플리케이션으로 가져올 수 있다.
예제 – App.css
“App.css”라는 새 파일을 만들고 여기에 CSS 코드를 삽입한다.
body {
background-color: #282c34;
color: white;
padding: 40px;
font-family: Sans-Serif;
text-align: center;
}
예제 – index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import './App.css';
const Header = () => {
return (
<>
<h1>Hello Style!</h1>
<p>Add a little style!.</p>
</>
);
}
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Header />);
CSS 모듈
애플리케이션에 스타일을 추가하는 또 다른 방법은 CSS 모듈을 사용하는 것이다.
CSS 모듈은 별도의 파일에 배치되는 구성 요소에 편리하다.
⭐ 모듈 내부의 CSS는 이를 가져온 구성 요소에만 사용할 수 있으며 이름 충돌에 대해 걱정할 필요가 없다.
.module.css 확장자를 사용하여 CSS 모듈을 만든다 (예: my-style.module.css).
예제 – my-style.module.css
“my-style.module.css”라는 새 파일을 만들고 여기에 CSS 코드를 삽입한다.
.bigblue {
color: DodgerBlue;
padding: 40px;
font-family: Sans-Serif;
text-align: center;
}
예제 – Car.js
구성요소에서 스타일시트를 가져온다.
import styles from './my-style.module.css';
const Car = () => {
return <h1 className={styles.bigblue}>Hello Car!</h1>;
}
export default Car;
예제 – index.js
애플리케이션에서 구성요소를 가져온다.
import ReactDOM from 'react-dom/client';
import Car from './Car.js';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Car />);