[새싹 프론트엔드] Styled-Components 기초 배우기

💻 INTRO

오늘은 React에 css를 적용하는 여러 방법 중 가장 많이 쓰인다는 Styled-Components에 대해 알아보려고 합니다

 

Styled-Components는 컴포넌트 단위로 스타일을 지정해주는 방식이기 때문에 리액트의 특성에 가장 알맞은 css 작성 방식이라고 할 수 있습니다. 최근 리액트 프로젝트를 진행하며 Sass를 사용해봤는데 기존 css에 비해 매우 편리했지만 mixins 파일들을 제외하고도 아래와 같이 엄청 많은 scss 파일을 만들어야 했습니다.

 

 

그래서 찾아본 게 Styled-Components 인데요!! Styled-Components는 CSS-in-JS 라이브러리이기 때문에 CSS를 JS 파일에 바로 넣는 방식을 사용합니다. 실제 간단하게 사용해보니 스타일을 바꾸기 위해 여러 파일을 뒤질 필요가 없어져서 유지보수에 정말 편할 것 같다는 인상을 받았습니다. 그럼 기본적인 Styled-Components 사용법에 대해 알아볼까요?

 

---

💻 실습

설치 방법

$ npm i styled-components

 

사용 방법
-먼저  import styled from 'styled-components' 를 맨 위에 작성해주세요
- 컴포넌트 이름은 대문자로 시작하고
- styled 뒤에는 사용할 HTML 태그명을 입력해주세요
- 그 후 스타일 시트는 백틱(``)으로 감싸서 작성해주시면 됩니다!!!!

 

 

 

📕 아래 간단한 예시를 만들어보며 Styled-Components를 배워보도록 하겠습니다. 

 

import styled from 'styled-components';

const Title = styled.h1`
  font-size: 1.5em;
  text-align: center;
  color: palevioletred;
`;

const Wrapper = styled.section`
  padding: 4em;
  background: papayawhip;
`;

return(
  <Wrapper> 
    <Title> 
      Hello World!
    </Title> 
  </Wrapper> 
);

 

 

이렇게 styled 뒤에 원하는 태그 이름을 적어주고 백틱 기호 안은 기존 CSS라고 생각하고 작성해주면 됩니다.

위 코드에서 Wrappper 컴포넌트 자리에 section 태그가 들어가고 Title 컴포넌트 자리에 h1이 들어간다고 생각하면

이해가 쉬우실 거에요. 스타일을 입힌 태그를 컴포넌트 형식으로 넣어준다고 생각하시면 됩니다!!

 

---

📕 Styled-Components에 props를 적용해보기

 

이번에는 props를 활용해서 아래 예시를 만들어 볼까요?

 

import styled from 'styled-components';

const Button = styled.button`
  background: ${props => props.primary ? "palevioletred" : "white"};
  color: ${props => props.primary ? "white" : "palevioletred"};
  font-size: 1em;
  margin: 1em;
  padding: 0.25em 1em;
  border: 2px solid palevioletred;
  border-radius: 3px;
`;

return(
  <div>
    <Button>Normal</Button>
    <Button primary>Primary</Button>
  </div>
);

 

primary를 props로 넘겨주고 삼항연산자를 사용하여 조건에 맞는 스타일을 지정해주고 있습니다. 이렇게 하니 CSS파일을 따로 작성하는 방식보다 코드가 많이 짧아지고 한 눈에 볼 수 있어서 좋은 것 같습니다 :)

 

지금까지 배운 것은 Styled-Components의 아주 기본적인 사용 방법입니다. 이를 바탕으로 아래 페이지를 들어가서 다양한 방법의 Styled-Components 활용법을 익히면 좋을 것 같습니다!!!!!

https://styled-components.com/

 

---

참고

https://styled-components.com/

 

 

 

새싹DT 기업연계형 프론트엔드 실무 프로젝트 과정 6주차 블로그 포스팅