[STYLED COMPONENTS] 컴포넌트 확장하기

학습일 : 2023. 03. 27

---

중복된 css 중 일부분만 바꾸고 싶은 경우가 많은데,

이런 경우 코드를 복붙하기에는 너무 비효율적이라 생각이 많이 들었었다.

 

어떻게 하면 기존에 있는 컴포넌트를 스타일을

효율적으로 확장할 수 있는지 알아보자!

 

 

여기에

Box 컴포넌트가 똑같은게 두개가 생성되어 있다고 치자.

지금은 두개 모두 빨간색인 상태이다.

import styled from "styled-components";

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

const Box = styled.div`
  background-color: red;
  width: 100px;
  height: 100px;
`;

function App() {
  return (
    <Father>
      <Box />
      <Box />
    </Father>
  );
}

export default App;

 

실행해보면 이렇게 두개 다 배경색이 빨간색으로 적용되어 있음을 볼 수 있다.

 

두개 다 배경색이 red

이 상태에서 나머지 하나의 <Box /> 에

파란색을 적용하고 싶다면

아래처럼 prop를 이용하면 된다.

 

1. 

Box 태그 안에

내가 지어준 prop 이름인

bgColor="red"

bgColor="blue"

이런식으로 작성해준 다음

 

2.

이 prop들을 컴포넌트에서 받아주어야 하는데

컴포넌트를 정의 해준 const Box = 어쩌고 에서

css 속성으로 background-color 부분에

 background-color: ${(props) => props.bgColor};

 

이렇게 파라미터를 받는 함수를 적어주면 된다.

 

 

실행결과

 

 

전체 코드는 아래와 같다.

import styled from "styled-components";

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

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

function App() {
  return (
    <Father>
      <Box bgColor="red" /> {/*1*/}
      <Box bgColor="blue" /> {/*1*/}
    </Father>
  );
}

export default App;

 

---

이번에는 Circle 이라는 컴포넌트를 만들어 볼건데

이 컴포넌트는 Box 컴포넌트에서 border-radius : 3rem; 을 추가시킨 애로 만들고 싶다면

 

const Circle 컴포넌트를 만들어 줄 때

 

styled(Box)`스타일속성`;

 

이라고 작성해주면 된다.

 

전체코드는 아래와 같다.

 

import styled from "styled-components";

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

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

const Circle = styled(Box)`
  border-radius: 3rem;
`;

function App() {
  return (
    <Father>
      <Box bgColor="red" /> {/*1*/}
      <Circle bgColor="blue"></Circle>
    </Father>
  );
}

export default App;

 

실행결과

 

 

 

엄청 편리함! :>