React - Styled Component

✅ 실무에서는 거의 퍼블리싱 된 페이지를 받아 개발을 진행하는데, 최근 사이드프로젝트를 진행하면서 Styled Component를 통해 직접 CSS를 꾸며보고 있습니다. 공부한 내용을 정리하고자 글을 작성합니다.

---

📌 Styled-Compoenets ?

• Styled-Components 는 JS의 태그가 지정된 템플릿 리터럴과 CSS의 기능을 사용하여 구성 요소에 반응하는 스타일을 제공하는 CSS-in-JS 라이브러리입니다.

 

* React 컴포넌트 스타일링 방법

1. 외부 CSS 파일에서 작성한 코드를 className 속성으로 전달
- 규모카 커질수록 css 부피가 커지는 단점이 있습니다. (SASS를 적용하여도 부피가 큼)

2. inline CSS를 React 컴포넌트에 삽입
- 인라인 스타일은 미디어 쿼리를 사용하지 못하고, 지속성과 확장성이 떨어집니다.
- 브라우저 호환성, camelCasing 및 automatically appended scalar quantities에 대한 우려가 있습니다.

3. CSS-in-JS
- 스타일 정의를 CSS 파일이 아닌 JS로 작성된 컴포넌트에 바로 삽입하는 스타일 기법입니다.
 1) 자유로운 CSS 커스텀 컴포너트를 만들 수 있습니다.
 2) 인라인 스타일링을 했을 때 우선순위 변경을 막을 수 있습니다.
 3) 모바일(React Native)개발을 할 때, 재사용이 가능합니다.
 4) 스코프가 존재하여, 스타일 적용 범위가 한정적이라 사이드 이펙트가 줄어듭니다.
 5)  No-class policy 가 가능합니다.
 6) 서버사이드 렌더링을 지원합니다.
 7) 단위 테스팅이 가능합니다.
 8) attribute 추가가 가능하며 스타일이 porps를 적용 할 수 있습니다.

 

📌 사용법 !

• 패키지 설치

npm 사용 : npm install styled-components
yarn 사용 : yarn add styled-components

 

 

• 기본 사용방법
  
  
  1. 상단에 styled-components 를 import 합니다.
  2. 모든 HTML 태그에 대해 속성이 정의되어 있으므로 "styled.속성" 으로 접근하여 CSS를 작성합니다.
  3. 컴포넌트에 적용합니다.

/* [ css.js 파일 ] 
1. 상단에 styled-components import
2. 모든 HTML 태그에 대해 속성이 정의되어 있으므로 "style.속성" 으로 접근하여 CSS 작성
*/
import styled from 'styled-components';

export const Header = styled.div`
  color:blue;
  font-size:20px;
`;


/* [ MainContainer1.js 파일 ]
3. css.js에서 작성한 Header 스타일링 적용
*/
import React from "react";
import {Header} from "../Style/css";

const MainContainer1 = (props) => {

    return (
        <Header>안녕하세요!</Header>
    )

}

export default MainContainer1;

결과

 

• 고정 스타일링과 가변 스타일링
  
  
  • 고정 스타일은 말 그대로 작성한 CSS가 동적으로 변경 없이 그대로 적용됩니다. (위 예제에서 <Header> 태그가 고정 스타일)
  • 가변 스타일링은 props에 따라 바꾸고 싶은 속성이 있는 경우 적용합니다.

/* -- 가변 스타일링 예제 1. -- */

/* [ css.js 파일 ] */
import styled from 'styled-components';

export const StyledDiv = styled.div`
  color: ${props => props.color || "black"};
  font-size:${props => props.fontSize || "20px"};
`;

/* [ MainContainer1.js 파일 ] */
import React from "react";
import {StyledDiv} from "../Style/css";

const MainContainer1 = (props) => {

    return (
        <React.Fragment>

            <StyledDiv>기본</StyledDiv>

            <StyledDiv color={"blue"} fontSize={"30px"}>파란글씨</StyledDiv>

            <StyledDiv color={"green"} fontSize={"40px"}>초록글씨</StyledDiv>

        </React.Fragment>
    )

}

export default MainContainer1;

/* -- 가변 스타일링 예제 2. -- */

/* [ css.js 파일 ] */
import styled, {css} from 'styled-components';

export const StyledDiv = styled.div`
    ${(props) =>
    props.type=='defaultType' &&
    css`
      color: black;
      font-size:20px
    `}
    
    ${(props) =>
    props.type=='blueType' &&
    css`
      color: blue;
      font-size:30px
    `}
    
    ${(props) =>
    props.type=='greenType' &&
    css`
      color: green;
      font-size:40px
    `}
`;

/* [ MainContainer1.js 파일 ] */
import React from "react";
import {StyledDiv} from "../Style/css";

const MainContainer1 = (props) => {

    return (
        <React.Fragment>

            <StyledDiv type={"defaultType"}>기본</StyledDiv>

            <StyledDiv type={"blueType"}>파란글씨</StyledDiv>

            <StyledDiv type={"greenType"}>초록글씨</StyledDiv>

        </React.Fragment>
    )

}

export default MainContainer1;

 

결과

 

🔗 참고한 글

[styled-components] styled-components 소개 및 설치 방법