[React] CSS-in-JS, styled-componenets

CSS-in-JS ?

자바스크립트 코드 내에서 CSS를 작성하는 방식을 말한다.
리액트에서는 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/