React에서 styled-components로 스타일링하기

 

 

 

안녕하세요 오늘은 리액트 스타일드 컴포넌트에 대해 알아보겠습니다.

 

저는 학원에서 CSS,SCSS를 배워 이부분이 익숙하지만 리액트를 사용하게 되면

 

프론트엔드 관점에서 CSS를 사용하는 것 보다 클래스 네임등을 설정하지 않아도 되므로 

 

클래스 명 충돌을 방지하고 컴포넌트를 사용하게 되므로 재사용성을 높일 수 있다는

 

편한점이 있습니다.

 

 

기본적인 스타일드 컴포넌트 예제를 살펴보고 어떻게 사용하는지에 대해 작성해보겠습니다.

 

먼저 npm install styled-components 명령어를 실행해 주세요.

 

import React from "react";
import styled from "styled-components";

const Button = styled.button`
  background-color: ${(props) => props.backgroundColor};
  width: ${(props) => props.width};
  line-height: ${(props) => props.lineHeight};
  border: none;
  border-radius: 10px;
  margin-left: 20px;
  margin-bottom: 15px;
  cursor: pointer;
  color: #fff;
`;
const Custombtn = (props) => {
  return (
    <Button
      backgroundColor={props.backgroundColor}
      width={props.width}
      lineHeight={props.lineHeight}
    >
      {props.name}
    </Button>
  );
};

Custombtn.defaultProps = {
  backgroundColor: "#e28843c9",
  width: "200px",
  lineHeight: "40px",
  name: "버튼",
};

export default Custombtn;

 

1. 먼저 스타일드 컴포넌트 버튼 태그를 만들었고 

 

2. 커스텀 버튼이라는 컴포넌트를 만들어 props를 사용합니다.

 

3. defaultProps를 설정해줘서 재사용하기 용이하게 만들어줬습니다.

 

이제 실제로 사용할때는 

 

import React from 'react'
import styled from 'styled-components'
import Custombtn from '../componets/Custombtn'
import Nav from '../componets/Nav'

const Div = styled.div`
    margin-top: 60px;
    margin-left: 100px;
`

const H2 = styled.h2`
    margin-bottom: 40px;
`
const About = () => {
  return (
    <>
        <Nav />
        <div>
            <Div>
                <H2>커스텀 생성 버튼</H2>
                <Custombtn 
                  name={"빨강버튼"}
                  backgroundColor={"red"}
                  width={"100px"}
                  lineHeight={"50px"}     
                ></Custombtn>
                <Custombtn
                  name={"파랑버튼"}
                  backgroundColor={"blue"}
                  width={"150px"}
                  lineHeight={"70px"} 
                ></Custombtn>
                <Custombtn
                  name={"검정버튼"}
                  backgroundColor={"black"}
                  width={"60px"}
                  lineHeight={"30px"} 
                ></Custombtn>
                <Custombtn
                  name={"회색버튼"}
                  backgroundColor={"gray"}
                  width={"130px"}
                  lineHeight={"60px"} 
                ></Custombtn>
            </Div>
            <Div>
                <H2>디폴트 생성 버튼</H2>
                <Custombtn></Custombtn>
            </Div>
        </div>
    </>
  )
}

export default About

이렇게 사용이 가능합니다.

 

 

 

기존 css와 scss를 사용하며 SEO에 대해서는 누구나 생각해 보았을 것입니다.

 

styled-components와 같은 CSS-in-JS 라이브러리를 사용하는 것이 SEO에 직접적인 영향을 미치지는 않습니다.

 

그러나 웹사이트의 로딩 시간과 사용자 경험은 SEO에 중요한 요소이므로,

 

이 부분에서 styled-components의 사용 방법을 최적화하는 것이 중요합니다.

다음과 같은 부분들을 고려해 볼 수 있습니다.

 

 

1. 코드 스플리팅(Code Splitting): styled-components를 사용하면 CSS 코드가 자바스크립트 번들에 포함되어 전송됩니다. 이 때문에 큰 프로젝트에서는 번들 사이즈가 커질 수 있습니다. 이 문제를 해결하기 위해 코드 스플리팅 기법을 활용하여 필요한 부분만 로드하도록 할 수 있습니다.

2. 서버 사이드 렌더링(Server Side Rendering, SSR): 초기 페이지 로딩 속도를 향상시키고, 크롤러가 콘텐츠를 쉽게 파악할 수 있도록 하기 위해 SSR을 활용할 수 있습니다. styled-components는 SSR과 잘 호환되며, 서버에서 스타일을 렌더링하여 클라이언트로 보낼 수 있습니다.

3. Critical CSS 추출: Critical CSS란 페이지의 초기 렌더링에 필요한 최소한의 CSS를 의미합니다. styled-components에서는 ServerStyleSheet API를 통해 Critical CSS를 추출할 수 있으며, 이를 통해 초기 로딩 성능을 개선하고 반응성을 향상시킬 수 있습니다.

4. Semantic HTML 구조 유지: HTML 요소에 직접 스타일을 적용하는 대신, 의미론적인 HTML 구조(예: <header>, <footer>, <nav> 등)를 유지하면서 스타일링하세요. 이렇게 하면 검색 엔진 크롤러가 사이트의 내용과 구조를 더 잘 이해할 수 있습니다.

5. 대체 텍스트와 접근성 고려: 이미지나 아이콘이 포함된 컴포넌트의 경우 alt 속성 등으로 대체 텍스트 제공 등 접근성 관련 가이드라인 준수하세요.

6. 메타 태그와 헤더 정보: 페이지별로 적절한 메타 태그와 헤더 정보를 설정하면 SEO에 도움이 됩니다.

 

7. 웹사이트의 전반적인 성능과 사용성을 개선: Lighthouse나 PageSpeed Insights 같은 도구를 활용하여 정기적으로 성능을 측정하고 최적화하는 것이 중요합니다.