CSS
React 컴포넌트 스타일링
React 공식 문서에서는 스타일링에 관한 명확한 가이드는 제공하고 있지 않습니다. 워낙 다양한 스타일링 방식들이 개발되어 사용되고 있기 때문에 특정 방식만으로 한정하여 권장하는 것은 의미가 없기 때문입니다. 따라서 React에서는 다양한 스타일링 방식 중에서 개발 환경이나 개발자의 기호에 따라 어떠한 스타일링 방식을 사용해도 무방합니다.
React에서 자주 사용되는 스타일링 방식은 다음과 같습니다.
1. CSS 스타일링
2. Sass
3. CSS Module
4. styled-components
이번 장에서는 CSS에 대해 어느 정도 알고 있어야만 이해할 수 있는 내용들로 구성되어 있으므로, 만약 CSS에 대한 이해가 부족하다면 티씨피스쿨의 CSS 수업을 참고하도록 합시다.
CSS 클래스를 활용한 스타일링
기존부터 사용해 왔던 전통적인 방식의 CSS 스타일링을 계속 사용하는데 문제가 없고, 새로운 스타일링 방식을 적용하는 것이 불필요하다고 판단된다면 기존의 CSS 스타일링 방식을 그대로 사용해도 무방합니다.
React 컴포넌트에 스타일을 적용하는 가장 간단한 방법은 인라인(inline) 스타일을 적용하는 것입니다. HTML 태그에 인라인 스타일을 적용하는 것과 마찬가지로 style 속성을 사용하여 React 엘리먼트에 인라인 스타일을 곧바로 적용할 수 있습니다.
하지만 React에서는 웹 페이지와는 달리 인라인 스타일을 적용할 때 style 속성값으로 일반 문자열이 아닌 자바스크립트 객체를 할당해야만 하고, CSS 속성명을 카멜 표기법(CamelCase)으로 바꿔 작성해야만 합니다.
예제(App.js)
const appStyle = {
textAlign: "left"
};
const headerStyle = {
backgroundColor: "black",
color: "yellow",
textAlign: "center"
};
const titleStyle = {
textDecoration: "underline",
textShadow: "4px 1px #9c9c9c"
};
const App = () => {
return (
<div style={appStyle}>
<header style={headerStyle}>
<h1 style={titleStyle}>Hello, React!</h1>
</header>
<p>React 스타일링 수업에 잘 오셨습니다!</p>
</div>
);
};
export default App;
하지만 React 애플리케이션의 주요 스타일링 방식으로 style 속성을 활용한 인라인 스타일링만을 사용하는 것은 유지보수 측면이나 성능 상의 이유로 권장하지 않으며, style 속성은 렌더링될 때 동적으로 스타일을 추가하기 위해서만 사용하는 것이 좋습니다.
따라서 인라인 스타일링보다는 일반적으로 별도의 파일에 스타일을 정의해 놓고, className 속성을 사용하여 외부 CSS stylesheet에 정의된 클래스(class)를 참조하는 방식이 주로 사용됩니다.
styles.css
.App {
text-align: left;
}
.App-header {
background-color: black;
color: yellow;
text-align: center;
}
.App-title {
text-decoration: underline;
text-shadow: 4px 1px #9c9c9c;
}
예제(App.js)
import "./styles.css";
const App = () => {
return (
<div className="App">
<header className="App-header">
<h1 className="App-title">Hello, React!</h1>
</header>
<p>React 스타일링 수업에 잘 오셨습니다!</p>
</div>
);
};
export default App;
위의 예제와 같이 외부 CSS stylesheet를 참조하는 방식은 사용 방법이 매우 간단합니다. 하지만 애플리케이션의 규모가 커질수록 컴포넌트의 개수도 증가하게 되고, 이렇게 관리해야 할 CSS 파일이 많아질수록 여러 컴포넌트에서 사용된 ClassName 속성값이 중복될 가능성도 함께 높아지게 됩니다.
CSS 선택자를 활용한 스타일링
React 컴포넌트에 스타일을 적용하는 또 다른 방법으로는 CSS 선택자(Selector)를 활용한 방법이 있습니다.
CSS에서는 스타일을 적용할 대상을 손쉽게 선택할 수 있도록 다양한 선택자를 제공하고 있으며, 이를 활용하여 컴포넌트에 손쉽게 스타일을 적용할 수 있습니다.
다음 예제는 앞서 살펴본 CSS 클래스를 활용한 스타일링 예제의 코드를 CSS 선택자를 활용하도록 변환한 예제입니다.
styles.css
.App {
text-align: left;
}
/* .App에 포함되어 있는 <header>요소 */
.App header {
background-color: black;
color: yellow;
text-align: center;
}
/* .App에 포함되어 있는 <header>요소에 포함되어 있는 <h1>요소 */
.App header h1 {
text-decoration: underline;
text-shadow: 4px 1px #9c9c9c;
}
예제(App.js)
import "./styles.css";
const App = () => {
return (
<div className="App">
<header>
<h1>Hello, React!</h1>
</header>
<p>React 스타일링 수업에 잘 오셨습니다!</p>
</div>
);
};
export default App;
