Styled-Components 배우기

2 분 소요

📖 지난 글 보기

안녕하세요. Nerd Lee 입니다.

지난 글에서, styled-components를 사용하는 방법에 대해서 알아봤습니다.

그런데! 지난 글을 보면, 같은 크기의 박스인데.. color만 다를 뿐인데

이걸 꼭 굳이 두개를 같이 써야할까? 라는 고민을 하실 수 있습니다.

그럼 어떻게 하면, 같은 Box 컴포넌트를 가지고 색깔을 변경할 수 있을까에 대해서 한 번 알아보도록 하겠습니다!

Styled-Components 확장 사용

1. 코드 작성하기

지난 강의 코드

import styled from "styled-components";

const Parent = styled.div`
  display: flex;
`;

const ChlidBoxOne = styled.div`
  background-color: pink;
  width: 100px;
  height: 100px;
`;

const ChlidBoxTwo = styled.div`
  background-color: black;
  width: 100px;
  height: 100px;
`;

function App() {
  return (
    <Parent>
      <ChlidBoxOne />
      <ChlidBoxTwo />
    </Parent>
  );
}

export default App;

위의 코드를 밑에처럼 변경해주세요.

import styled from "styled-components";

const Parent = styled.div`
  display: flex;
`;

const ChlidBox = styled.div`
  background-color: pink;
  width: 100px;
  height: 100px;
`;

function App() {
  return (
    <Parent>
      <ChlidBox />
      <ChlidBox />
    </Parent>
  );
}

export default App;
  • 그리고 npm start를 입력해서 실행하면, 핑크색 박스만 2개가 나란히 정렬이 되어 있는 것을 확인하실 수 있습니다.

2. props로 색깔만 전달해서 변경하기

react에서 자주 사용되는 props 처럼, styled-components에 전달해서 색깔을 변경해봅시다.

import styled from "styled-components";

const Parent = styled.div`
  display: flex;
`;

const ChlidBox = styled.div`
  background-color: ${(props) => props.backgroundColor};
  width: 100px;
  height: 100px;
`;

function App() {
  return (
    <Parent>
      <ChlidBox backgroundColor="pink" />
      <ChlidBox backgroundColor="black" />
    </Parent>
  );
}

export default App;
  • ChlidBox 컴포넌트에, backgroundColor 라는 속성을 넣어주고, 거기에 각각의 색깔 값을 넣어줍니다.
    그리고 위에 있는 ChlidBox에는 ${(props) => props.backgroundColor} 로 값을 받아와서 속성에 값을 대입합니다.

3. styled-components 확장해서 사용해보기

box가 아닌 circle을 만들어봅시다.

import styled from "styled-components";

const Parent = styled.div`
  display: flex;
`;

const Box = styled.div`
  background-color: ${(props) => props.backgroundColor};
  width: 100px;
  height: 100px;
`;

const Circle = styled.div`
  background-color: ${(props) => props.backgroundColor};
  width: 100px;
  height: 100px;
  border-radius: 50px;
`;

function App() {
  return (
    <Parent>
      <Box backgroundColor="pink" />
      <Circle backgroundColor="black" />
    </Parent>
  );
}

export default App;
  • Circle을 추가해주고, ChildBox가 아닌 Box로 이름을 변경한 뒤
    Box에 있는 값을 Circle에 복사 / 붙여넣기 한 다음, border-radius만 추가해줍니다.
    하지만, 이번엔 속성값이 중복이 됩니다. border-radius만 추가하면 되는데 말이죠….;;
    걱정하지 마세요! styled-components는 가능합니다!!!

styled() 함수 사용하기

import styled from "styled-components";

const Parent = styled.div`
  display: flex;
`;

const Box = styled.div`
  background-color: ${(props) => props.backgroundColor};
  width: 100px;
  height: 100px;
`;

const Circle = styled(Box)`
  border-radius: 50px;
`;

function App() {
  return (
    <Parent>
      <Box backgroundColor="pink" />
      <Circle backgroundColor="black" />
    </Parent>
  );
}

export default App;
  • 위의 코드처럼 작성하게 되면, styled(Box)로, Box에 있는 속성값을 상속받는 형태가 됩니다.
    클래스를 사용하는 것 처럼 말이죠.


이 글이 도움이 되셨다면 댓글 부탁드립니다^^
다음 글로 찾아오겠습니다!

참고