[react] CSS-in-JS

October 7, 2022

CSS-in-JS ?

CSS코드를 작성하여 꾸며진 컴포넌트를 생성하는 방식. 이를 위해 styled-componenets 패키지가 사용된다.

styled-components

React에서 CSS-in-JS를 사용할 수 있도록 하는 패키지.

설치하기
```
yarn add styled-components
```
( + ) vscode plug-in 중 ‘vscode-styled-componenets’ 설치되어있어야 작성이 편하다.

사용하기 : 기본

impot
```
import styled from 'styled-components'
```

CSS를 적용하여 component를 생성할 수 있다.

const StDiv = styled.div`
width: 100px;
height: 100px;
`; // 백틱 안에 css 코드 작성

생성한 components 사용

function APP(){
    return <StDiv> DIV </StDiv>	// Div 태그 대신 생성한 Div 사용
}

사용하기 : 조건부 스타일링

props를 통해 style을 전달받아 같은 style의 일부만 변경하여 재사용할 수 있다.

props로 받은 매개변수를 적용하여 생성하기

const StDiv = styled.div`
width: 100px;
height: 100px;
border: 1px solid ${(props) => props.borderColor};
`; 			       // △ border Color가 입력되는 부분에 매개변수사용

※ ${}은 템플릿 리터럴 ` `` `에서 javascript를 사용한다는 표현

매개변수 전달하여 사용하기

function APP(){
    return <StDiv borderColos="red"> Red border DIV </StDiv>
}				  //△ 매개변수 전달

전역 스타일 ( Global Style )

전역 스타일의 필요성

위 예제의 방식은 작성한 컴포넌트 내부에서만 유효하며 이를 컴포넌트 레벨 스타일링이라한다.
```
import styled from 'styled-components';
  
const StDiv = styled.div``;
  
function App(){
      
    return <StDiv />
}
  
export default App;
```
다만 다수의 모든 컴포넌트에 동일한 스타일이 사용된다면, 이를 매 컴포넌트마다 설정하는 것은 비효율적인 일이다.

전역 스타일

애플리케이션 레벨 스타일링

최상위 컴포넌트를 CSS-in-JS component로 생성하여 해당 component의 CSS를 하위 component에 모두 적용시키는 것을 말한다.

Import

import { createGlobalStyle } from 'styled-components'

Global Style component 생성하기

특정 class나 id를 사용하여 설정하기보다 예시와 같이 HTML Element에 대한 스타일을 명시하는 경우가 자주 사용되는 것 같다.

const GlobalStyle = createGlobalStyle`
*, *::before, *::after {
 box-sizing: border-box; 
}
      
body {
	font-family: 'Verdana';
}
      
p{
	font-size: 12px;
}
`
      
export default GlobalStyle

Global Style component 사용하기

import GlobalStyle from './GlobalStyle'
      
function APP(){
          
    return (
	    <>
    	    <GlobalStyle/>
        	// 그 외 component를 추가하면 추가한 component에도 위 GlobalStyle이 적용된다.
        </>
    )
}

참조

https://www.daleseo.com/styled-components-global-style/

Rose

CSS-in-JS ?

styled-components

전역 스타일 ( Global Style )

참조