[React] Styled Component (컴포넌트 확장)

노마드코더 React JS 마스터 클래스 #2 .2

 

 

컴포넌트 확장이란, 기존 컴포넌트의 모든 속성을 가지고 오면서 새로운 속성까지 더해주는 것이다. 

 

 

props를 통해 컴포넌트 style을 설정한다. 

 

import styled from "styled-components";

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

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

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

function App() {
  return (
    <Father>
      <Box bgColor="teal" />
      <Circle bgColor="tomato" />
    </Father>
  );
}

export default App;

 

 

이 때, 기존 컴포넌트인 Box 가 가진 모든 속성들에 border-radius 속성을 더한 Circle 컴포넌트를 만들고 싶다면?

 

 

 

import styled from "styled-components";

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

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

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

function App() {
  return (
    <Father>
      <Box bgColor="teal" />
      <Circle bgColor="tomato" />
    </Father>
  );
}

export default App;

 

 

 

styled 함수를 쓰면, Box의 모든 속성들을 가져오고 ` ` 안의 코드들을 추가적으로 더해준다. 

 

그리고 backgroundColor는 props를 통해 tomato로 다르게 설정도 가능하다. 

이는 Circle이 Box의 모든 것을 받고 있는데 Box가 bgColor라는 props를 통해 배경색 설정 값을 받고 있기 때문이다.