개요
리액트 스타일 주입 방법은 다양하다.
정해진 답은 없다.
개인 프로젝트라면 자신이 편한 방식대로 사용하면 된다.
팀프로젝트라면 팀의 컨벤션에 따라 사용하면 된다.
Tag style
태그 내에 스타일을 넣는 방법이다.
해당 태그에만 사용하는 스타일일 경우에만 사용하자.
// Header.js 파일
import React from "react";
const Header = () => {
return <div style={{ backgroundColor: "yellow" }}>헤더입니다.</div>;
};
export default Header;
CSS
기본적인 스타일 입력방법이다.
css를 사용하여 스타일을 적용하려면 프로젝트에 단일 css파일로 관리하는 것이 용이하다.
/* header.css 파일 */
.header {
background-color: yellow;
}
// Header.js 파일
import React from "react";
import "style/header.css";
const Header = () => {
return <div className="header">헤더입니다.</div>;
};
export default Header;SCSS (SASS)
css의 확장판이다.
css 전처리기로써 다양한 기능을 제공한다.
장점
- 변수를 사용할 수 있다.
- 다른 SCSS파일을 import 할 수 있다.
- 스타일을 묶음으로 만들고 재사용할 수 있다. (@mixin 과 @include)
- 스타일을 파라미터를 포함해 함수처럼 만들 수 있다. (@mixin)
- 스타일을 확장 및 상속 할 수 있다. (@extend 와 Inheritance)
yarn add node-sass/* header.scss 파일 */
$headerColor: yellow;
.header {
background-color: $headerColor;
}
// Header.js 파일
import React from "react";
import "style/header.scss";
const Header = () => {
return <div className="header">헤더입니다.</div>;
};
export default Header;module.css
css를 이용할 때 클래스명이 충돌하는 경우가 발생하는데 그것을 방지한다.
scss도 사용가능하다.
/* Header.module.css 파일 */
.Header {
background-color: yellow;
}
// Header.js 파일
import React from "react";
import HeaderStyle from "styles/Header.module.css";
const Header = () => {
return <div className={`${HeaderStyle.Header}`}>헤더입니다.</div>;
};
export default Header;styled-Components
css 라이브러리로서 많이 사용된다.
장점
- Automatic vendor prefixing
Css를 그냥 작성하고 styled-components에게 핸들링을 맡기면 개별적인 컴포넌트 스타일링의 장점을 느낄수 있다. - Automatic critical CSS
어떤 컴포넌트가 페이지에 렌더되는지 추적하고 스타일링을 하거나 하지 않을 수 있다. - No class name bugs
클래스명 충돌이 일어나지 않는다. - Easier deletion of CSS
특정 컴포넌트와 스타일링이 결합되어 있기 때문에 사용되지 않는 컴포넌트를 찾아내고 삭제하기 쉽게 만들어준다. - scss 라이브러리 없이 scss와 유사한 문법을 사용할 수 있다.
단점
- 재사용성이 높은 컴포넌트들이 잘 구성된 프로젝트가 아니라면 유지보수가 힘들어질 수 있다.
- 번들(초기로딩데이터)용량을 늘린다.
yarn add styled-components// Header.js 파일
import React from "react";
import styled from "styled-components";
const StyledDiv = styled.div`
background-color: yellow;
`;
// 다른 사용법
// const StyledDiv = styled("div")`
// background-color: yellow;
// `;
const Header = () => {
return <StyledDiv>헤더입니다.</StyledDiv>;
};
export default Header;타입힌트
타입힌트와 IDE의 자동완성을 이용해서 스타일 오브젝트를 만든다.
장점
- 추가적인 라이브러리 설치가 필요없다.(번들용량 최적화)
- SCSS와 같은 전처리기 없이 재사용, 상속, 함수화가 가능하다.
(자바스크립트 문법사용)
단점
- 순수 CSS 문법이아닌 리액트 스타일 문법이다.
아래의 번역사이트에서 쉽게 번역가능하다.
ex)1
// Header.js 파일
import React from "react";
/** @type {React.CSSProperties} */
const headerSytle = {
backgroundColor: "yellow",
};
const Header = () => {
return <div style={headerSytle}>헤더입니다.</div>;
};
export default Header;
ex)2
// HeaderStyle.js
/** @type {React.CSSProperties} */
const HeaderSytle = {
backgroundColor: "yellow",
};
export default HeaderSytle;// Header.js 파일
import React from "react";
import HeaderSytle from "styles/HeaderStyle";
const Header = () => {
return <div style={HeaderSytle}>헤더입니다.</div>;
};
export default Header;
ex)3
// HeaderStyle.js
/** @type { (color: string) => React.CSSProperties } */
const HeaderSytle = (color) => {
return {
backgroundColor: color,
};
};// Header.js 파일
import React from "react";
import HeaderSytle from "styles/HeaderStyle";
const Header = () => {
return <div style={HeaderSytle("yellow")}>헤더입니다.</div>;
};
export default Header;
참고자료
styled Components
https://velog.io/@qksud14/portfolio-05
SCSS @mixin 과 @include
https://hello-bryan.tistory.com/116
SCSS @extend 와 Inheritance
https://hello-bryan.tistory.com/117
module.css 클래스명 충돌방지
https://velog.io/@kwonh/React-CSS%EB%A5%BC-%EC%9E%91%EC%84%B1%ED%95%98%EB%8A%94-%EB%B0%A9%EB%B2%95%EB%93%A4-css-module-sass-css-in-js
티스토리 블로그 https://ondolroom.tistory.com/