[React] 웹 컴포넌트 스타일링 관리 styled components로 시작하기

 

 

고민의 시작

React를 사용할수록 css 코드를 어떻게 하면 똑똑하게 관리할 수 있을지 고민하게 됐다.

기존에 사용하는 방식은 흡사 무지성인 것 같은 Import 방식이다.

 

// App.js
import "styles.css";

const App = () => {
  return(
    <div>
    	...
    </div>
   );
}

Import 방식은 순수 JS로만 프론트를 짤 때 사용하던 방식이다.

css 파일을 하나 만들어주고 그 파일을 가져와서 입혀준다. 

이 방법으로 아직까지는 단점을 찾지 못했다.

 

하지만 React로 프론트를 짤 때 좀 더 똑똑한 혹은 편리한 css 관리가 있지 않을까?

 

 

 

프론트엔드 팀원과 고민 공유

프론트엔드 팀원분과 서로 개발 이야기를 하다가 저절로 고민을 공유하게 되었다.

실제 실무에서는 어떻게 관리하는지 궁금하기도 했다.

 

결론은 styled component을 추천해줬다.

 

styled components

styled components는 css 파일과 JS 파일을 분리하지 않고 같은 파일 내에서 작성하는 것이다.

그렇기 때문에 이 라이브러리는 CSS-in-JS롣

 

심지어 JS파일에 위치하기 때문에 props로 전다로 가능하다고 한다.

이럴 경우 조건부 스타일이 쉽게 가능하다.

 

알아보니 CSS-in-JS 라이브러리 중에서 가장 유명하고 널리 사용되는 라이브러리라고 한다.

 

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

const StyledButton = styled.button`
  padding: 6px 12px;
  border-radius: 8px;
  font-size: 1rem;
  line-height: 1.5;
  border: 1px solid lightgray;

  color: ${(props) => props.color || "gray"};
  background: ${(props) => props.background || "white"};
`;

function Button({ children, color, background }) {
  return (
    <StyledButton color={color} background={background} Î>
      {children}
    </StyledButton>
  );
}

import Button from "./Button";
<Button color="green" background="pink">
  Green Button
</Button>;

개인적으로 styled components는 기본적으로 HTML에서 제공해주는 컨테이너 태그들을 직접 만든다라고 이해했다.

즉, 사용자 정의 컨테이너 태그를 만드게 도와주는게 styled components라는 것.

 

 

 

결론

개인적으로 난 CSS 작성법이나 분리에 대해 더 관심이 있었다면 프론트엔드 팀원분은 클래스 중복에 더 중점을 두고 라이브러리를 추천해줬다.

또한 React를 쓴다고 해서 특별한 방법이 있는 것이 아니라 개인의 취향도에 따라 여러 방법을 쓸 수 있다고 했다.

즉, import를 하든 라이브러리를 쓰든 상관 없다는 것이다.

 

styled compnents를 공부할 수록 똑똑하게 css를 관리할 수 있을 것 같아 앞으론 이렇게 작성해봐야 할 것 같다.

https://www.daleseo.com/react-styled-components/

Styled Components로 React 컴포넌트 스타일하기