** 번역에 의역과 오역이 충분히 있을 수 있으므로, 가능하신 분들은 그냥 아래의 링크로 가셔서 원문을 읽어보시길 추천한다.
[원본글] Different Ways to Write CSS in React
Different Ways to Write CSS in React | CSS-Tricks
We’re all familiar with the standard way of linking up a stylesheet to the <head> of an HTML doc, right? That’s just one of several ways we’re able to
css-tricks.com
우리는 HTML파일의 <head>태그 내부에서 stylesheet를 연결하는 방법에 친숙하다. 그것은 CSS를 작성할 수 있는 여러가지 방법 중 하나일 뿐이다. React 프로젝트 같은 SPA(Single Page Application)에서 사용하기 적합한 방법은 어떤 것이 있을까?
React 프로젝트 CSS를 사용하는 방법으로는 여러가지가 있다. 우리가 잘 알고 있는 방법과 비슷한 것도 있고 그렇지 않은 것도 있다. 그러나 우리가 사용할 수 있는 모든 방법을 알아보자.
외부 스타일시트 가져오기
제목으로도 알 수 있듯이 React는 CSS파일을 import 할 수 있다. 그 방법으로는 우리가 HTML <head> 태그를 통해 CSS 파일을 연결하는 방법과 비슷하다.
- 프로젝트의 경로에 새로운 CSS파일을 생성한다.
- 필요한 CSS를 작성한다.
- React 파일에 작성한 CSS 파일을 import 한다.
예제.
import "./style.css";주로 파일의 다른 imports의 상단에 작성한다.
import { React } from "react";
import "./Components/css/App.css";
function App() {
return (
<div className="main">
</div>
);
}
export default App;예시에서 CSS 파일은 /Components/css 폴더에 위치하며 App.js 파일에서 파일을 import 했다.
인라인 스타일로 작성하기
아마 이 글을 읽고 있는 당신은 인라인 스타일링이 유지보수나 기타 사항에 좋지 않다는 것을 들어본 적 있겠지만 어떤 상황에서는 그것이 적절한 방법일 수 있다. 그리고 CSS는 이미 같은 파일 안에 있는 경우가 많기 때문에 React에서는 유지 보수가 그다지 문제 되지 않는다.
이것은 React에서 인라인 스타일링을 사용한 아주 단순한 예제이다.
<div className="main" style={{color: "red"}} >그러나 더 좋은 방법으로는 객체를 사용하는 것이다.
- 첫번째로 각각 다른 요소의 스타일을 포함한 객체를 생성한다.
- 스타일의 속성을 사용하여 요소에 추가하고 스타일을 지정할 속성을 선택한다.
예제.
import { React } from "react";
function App() {
const styles = {
main: {
backgroundColor: "#f1f1f1",
width: "100%",
},
inputText: {
padding: "10px",
color: "red",
},
};
return (
<div className="main" style={styles.main}>
<input type="text" style={styles.inputText} />
</div>
);
}
export default App;이 예제에는 두가지 스타일 객체를 가지고 있다. 각각 main 클래스와 input 태그에 연결되는 것으로 이것은 우리가 흔히 봐왔던 외부 스타일 시트에서 보던 규칙과 비슷한 값을 가지고 있다.
이 객체는 요소의 스타일 속성으로 적용됩니다.
스타일을 참조할 때 HTML 마크업에서 스타일 적용 시 따옴표보다는 중괄호를 사용하는 방법을 사용하는 것을 기억해 두시기 바랍니다.
CSS 모듈 사용
CSS 모듈..에 대해서 알아보도록 하자. 로컬 범위 변수의 이점이 있으며 React와 함께 바로 사용할 수 있다. 하지만 CSS 모듈이란 무엇인가?
repo의 문서를 인용하자면
" CSS 모듈은 CSS 파일을 CSS와 데이터로 컴파일 하여 동작한다. CSS의 아웃풋은 일반 전역 CSS이며 브라우저에 직접 삽입하거나 함께 연결하여 프로덕션용 파일을 작성할 수 있다.데이터는 사람이 읽을 수 있는 이름을 내가 파일에서 사용한 것과 매핑하여 안전하게 출력되도록 합니다. "
더 간단히 말해서, CSS 모듈은 각 클래스 이름이 고유의 프로그래밍 방식으로 만들어져 충돌없이 우리가 다수의 파일에 동시에 사용이 가능하도록 한다. 이런 점은 특히나 큰 프로젝트를 진행할 때 유용하다. 모든 클래스 이름은 가져오는 특정 구성 요소에 대해 로컬로 범위가 지정된다.
CSS 모듈 스타일 시트는 일반 시트와 비슷하지만 확장자가 다르다(예: styles.module.css). 설정하는 방법을 다음과 같다.
- 확장자가 .module.css 인 파일을 새로 생성한다.
- React 플젝트에 모듈을 import 한다.
- 요소나 컴포넌트에 클래스 네임을 추가하여 imported된 스타일 중 원하는 스타일을 참조한다.
예제.
styles.module.css
.heading {
color: #f00;
font-size: 20px;
}App.js
import { React } from "react";
import styles from "./styles.module.css";
function App() {
return (
<h1 className={styles.heading}>Hello World</h1>
);
}
export default App;
styled-components 사용하기
styled-components를 사용해 본적있는가? 이 방법은 많이들 사용하는 방법으로 커스텀 컴포넌트를 만들 수 있도록 CSS 파일을 자바스크립트에서 사용할 수 있도록 해준다.
styled-components는 기본적으로 스타일이 있는 React 컴포넌트이다. 일부 기능에는 고유 클래스 이름, 동적 스타일 지정 및 구성 요소의 고유한 별도의 스타일이 있어 유지보수의 유용성 등이 포함된다.
styled-components를 npm 패키리를 통해 설치한다.
npm install styled-components그리고 나서 import 한다.
import styled from 'styled-components';컴포넌트를 생성하고 스타일 속성을 부여한다. Wrapper 객체에서 백틱으로 표시된 템플릿 리터럴의 사용에 유의한다.
import { React } from "react";
import styled from "Styled-components";
function App() {
const Wrapper = styled.div`
width: 100%;
height: 100px;
background-color: red;
display: block;
`;
return <Wrapper />;
}
export default App;위 예제의 Wrapper 컴포넌트는 div로 지정된 스타일 값과 함께 렌더링된다.
조건부 스타일링
styled-components의 장점 중 하나는 CSS 내 props를 사용할 수 있는 것처럼 구성요소 자체가 기능적이라는 것인다. 이것은 조건문과 상태 또는 props에 따라 스타일을 변경할 수 있도록 해준다.
예제.
import { React, useState } from "react";
import styled from "styled-components";
function App() {
const [display, setDisplay] = useState(true);
const Warpper = styled.div`
width: 100%;
height: 100px;
background-color: red;
display: ${display ? "block":"none"};
`;
return (
<>
<Wrapper />
<button onClick={() => setDisplay(!display)}>Toggle</button>
</>
}
export default App;우리는 div의 display라는 속성으로 디스플레이 상태를 변형해서 사용했다. 디스플레이 상태는 버튼을 통해 제어되며 클릭하면 상태가 변경된다. 이것은 차례로 두 가지 다른 상태의 스타일을 전환한다.
인라인에서는 if문을 ?으로 사용한다. else에 해당하는 내용은 : 세미콜론 뒤에 있다. 그리고 초기화 설정된 후 상태를 호출하거나 사용한다는 것을 기억해야 한다. 위의 예제처럼 상태는 Wrapper 구성 요소의 스타일 위에 있어야 한다.
Happy React Styling!
우리는 React 애플리케이션에서 사용할 수 있는 다양하고 유용한 방법을 살펴봤다. 어떤 것이 다른것보다 훨씬 낫다라고 말할 수 없다. 상황에 따라 접근하는 것이 가장 좋은 방법이라고 할 수 있다. 이제 당신이 그것을 잘 이해하고 React 스타일링에서 사용할 수 있는 무기가 생겼다는 것을 알기를 바란다.
'Articles' 카테고리의 다른 글
| [번역] Strategies for Cache-Busting CSS (0) | 2023.03.16 |
|---|---|
| [번역] Part 3. CSS 모듈과 React (0) | 2022.07.01 |
| [번역] Part 2. CSS 모듈 사용하기 (0) | 2022.06.24 |
| [번역] Part 1. CSS모듈은 무엇이며 우리는 왜 이것이 필요한가? (0) | 2022.06.24 |
| [번역] 자바스크립트 프레임워크 전쟁은 끝났다. (0) | 2022.05.12 |