Styled-Components
는 대표적인 CSS-In-JS
라이브러리이며, Styled-Components
의 사용법에 앞서, CSS-In-JS
에 대해 알아보자.
CSS-In-JS
는 단어 그대로 자바스크립트 코드에서 css를 작성하는 방식이다. 전통적으로 HTML, CSS, JavaScript를 각각의 파일로 만들어 웹사이트를 개발하는 것이 가장 좋은 방식이었다. 하지만 React나 Vue, Angular와 같은 모던 자바스크립트 라이브러리가 인기가 많아지면서 최근에는 웹 애플리케이션을 여러 개의 재활용이 가능한 분리하여 개발하는 컴포넌트 기반개발 방법이 주류가 되어가고 있다. 따라서 기존에 HTML, CSS, JavaScript 를 따로 만들어 개발하는 것이 아닌, 여러개의 컴포넌트로 분리하여 각 컴포넌트안에 HTML, CSS, JavaScript 를 넣는 개발 방법이 유행하게 되었다. 이때 그 컴포넌트안에서 css를 작성하기 위해 CSS-In-JS라이브러리를 사용한다.
npm i styled-components
자세한 것은 공식페이지에서 : styled-components.com/docs
styled-components 설치하기.
만약 타입스크립트를 사용하고 있다면 다음과 같이 적용할 수 있다.
npm i styled-components && npm i -D @types/styled-components
설치를 한 이후에는 정말 간단하게 사용할 수 있다.
(편의성을 위해 확장으로 vscode-styled-component 등을 사용할 것!)
import styled from "styled-components";
//styled import하기
const HomeBox = styled.div`
//타입스크립트가 아니면 <{ hello: string }>는 삭제
width: 100%;
height: 100%;
background-color : "tomato";
`;
export const Search = () => {
const { register, handleSubmit } = useForm();
const navigate = useNavigate();
const onValid = (data: any) => {
navigate(`/summoner/?username=${data.username}`);
};
return (
<HomeBox>
<h1>Hello~</h1>
</HomeBox>
);
};
이렇게 위와 같이 사용할 수 있으며
Component에서 props 또한 사용이 가능하다.
(typescript를 사용한다면 props를 줄 때 props의 타입도 지정해주어야 한다.)
import styled from "styled-components";
//styled import하기
const HomeBox = styled.div<{ col: string }>`
//타입스크립트가 아니면 <{ col: string }>는 삭제
width: 100%;
height: 100%;
background-color : ${(props)=>props.col};
`;
export const Search = () => {
const { register, handleSubmit } = useForm();
const navigate = useNavigate();
const onValid = (data: any) => {
navigate(`/summoner/?username=${data.username}`);
};
return (
<HomeBox col={"blue"}>
<h1>Hello~</h1>
</HomeBox>
);
};
또한 글로벌 스타일로 지정도 가능한데, 다음과 같이 사용할 수 있다.
import { createGlobalStyle } from "styled-components";
const Global = createGlobalStyle`
글로벌로 지정할 스타일
`
(
<Global />
<App />
//스타일을 적용할 컴포넌트 상위에 위치
)
그리고 ThemeProvider를 사용하여, 하위의 모든 component에서 props로 theme을 받을 수가 있다.
<color.ts>
export const Color = {
blueColr: "#13D8F6",
darkBlue: "#D5E3FF",
bgColr: "#9055A2",
redColr: "#f76b8a",
darkRed: "#FFD8D9",
grayColr: "#EBEEF1",
blackColr: "#202D37",
darkGray: "#606470",
blueBg: "#ECF2FF",
redBg: "#FFF1F3",
};
<App.tsx>
import { Color } from "./util/color";
import { ThemeProvider } from "styled-components";
........
return (
<ThemeProvider theme={Color}>
//APP에 들어갈 하위 컴포넌트
</ThemeProvider>
);
}
이후 아래와 같이 props를 통해 Color.ts을 사용할 수 있다.
<ThmemProvider 하위 컴포넌트>
const Box = styled.div`
background-Color : ${(props)=>props.theme.redBg}
`