Styled-Components로 React 스타일하기.

Styled-Components는 대표적인 CSS-In-JS 라이브러리이며, Styled-Components의 사용법에 앞서, CSS-In-JS에 대해 알아보자.

#CSS-In-JS란?📌

CSS-In-JS는 단어 그대로 자바스크립트 코드에서 css를 작성하는 방식이다. 전통적으로 HTML, CSS, JavaScript를 각각의 파일로 만들어 웹사이트를 개발하는 것이 가장 좋은 방식이었다. 하지만 React나 Vue, Angular와 같은 모던 자바스크립트 라이브러리가 인기가 많아지면서 최근에는 웹 애플리케이션을 여러 개의 재활용이 가능한 분리하여 개발하는 컴포넌트 기반개발 방법이 주류가 되어가고 있다. 따라서 기존에 HTML, CSS, JavaScript 를 따로 만들어 개발하는 것이 아닌, 여러개의 컴포넌트로 분리하여 각 컴포넌트안에 HTML, CSS, JavaScript 를 넣는 개발 방법이 유행하게 되었다. 이때 그 컴포넌트안에서 css를 작성하기 위해 CSS-In-JS라이브러리를 사용한다.

#Styled-Components사용하기📌

	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}
`