[React] styled-components 사용법 [part 1 / 2]

styled-components는 리액트에서 CSS를 더 편하게 사용할 수 있도록 만들어주는 유용한 도구인데요. 저는 아직까지도 CSS가 마치 하나의 코딩 언어처럼 어렵게만 느껴지다 보니 styled-components에서는 이건 또 무슨 소리인가 싶더라고요. 그래서 기초부터 찬찬히 다시 봐야겠다는 생각이 들었습니다.

"styled-components"에 대한 특징이나 기본적인 설명은 생략하고 넘어가겠습니다. 어치피 styled-components 좋은거 잘 알고 이미 잘 사용하고 있기 때문에 어떻게 사용하는지가 중요한 거 아니겠습니까?!

 

설치

styled-components 사용을 위해서는 먼저 설치하고 프로젝트에 추가해 줍니다. npm, yarn 등을 이용해서 설치합니다.

# with npm
npm install --save styled-components

# with yarn
yarn add styled-components

 

기본구조

"styled-components"의 기본 구조는 다음과 같습니다. 일단 모듈을 사용하기 위해서 'styled'라는 이름으로 불러왔고 <div> 태그를 <Text>라는 이름으로 styled-component를 정의했습니다. 여기서 특이한 구조에 주의해야 하는데요. styled라는 키워드 뒤에 점(.)을 찍고 사용할 HTML 태그 이름을 붙여줍니다. 그러고 나서 백틱(`) 사이에 필요한 CSS 코드를 적으면 됩니다. 처음에 백틱을 작은따옴표(')로 착각해서 왜 안되지 하고 당황했던 기억이 있네요.

import styled from "styled-components";
const Text = styled.div`
  font-size: 1.5em;
  color: tomato;
`;

export default function App() {
  return (
    <>
      <Text>Hello. It's EveryX!</Text>
    </>
  );
}

이렇게 styled-componets를 정의했다면 정의된 이름을 마치 HTML 태그처럼 사용해주면 CSS 스타일이 적용되는 걸 확인할 수 있습니다.

활용

속성 부여하기

속성값을 이용해서 동적으로 스타일을 적용할 수 있습니다. 컴포넌트 속성으로 전달된 값을 'props'으로 받아서 활용할 수 있습니다.

import styled from "styled-components";
const Text = styled.div`
  font-size: 1.5em;
  color: ${(props) => (props.red ? "red" : props.notRed)};
`;

const BigText = styled(Text)`
  font-size: 3em;
`;

export default function App() {
  return (
    <>
      <Text red>Hello. It's EveryX!</Text>
      <Text notRed="blue">Hello. It's EveryX!</Text>
    </>
  );
}

첫번째 줄은 "red"라는 스타일이 적용 되었고 두번째 줄은 'pops.notRed'에 저장된 "blue"가 적용되었습니다.

스타일 확장하기

한번 정의해둔 styled-components를 약간 수정해서 사용할 때 사용할 수 있는 방식입니다. 다른 모든 스타일은 그대로 이용하되 한가지 속성만 다른 컴포넌트를 만들어야 할 때 요긴하게 쓸 수 있습니다.

import styled from "styled-components";
const Text = styled.div`
  font-size: 1.5em;
  color: ${(props) => (props.red ? "red" : "blue")};
`;

const BigText = styled(Text)`
  font-size: 3em;
`;

export default function App() {
  return (
    <>
      <Text>Hello. It's EveryX!</Text>
      <Text red>Hello. It's EveryX!</Text>
      <BigText>Hello. I'm Big!!</BigText>
    </>
  );
}

<Text>의 기본 속성은 그대로 활용하되 "font-size"만 변경해서 <BigText>라는 요소를 만들었습니다.

간단하죠?! 지금까지는 styled-components의 기본 용법을 알아봤습니다. 다음 포스팅에서는 좀더 복잡한 방법 계속 알아보겠습니다.

 

끝!