Adapting and Extending

니꼴라스의 React JS 마스터 클래스를 듣고 정리한 내용입니다.

아주 가벼운 예시인 박스 두개를 Styled Components로 작성해봅시다.

import styled from "styled-components";

const Container = styled.div`
  margin: 10px;
  background-color: whitesmoke;
  display: flex;
`;

const BoxOne = styled.div`
  background-color: tomato;
  width: 100px;
  height: 100px;
`;

const BoxTwo = styled.div`
  background-color: aqua;
  width: 100px;
  height: 100px;
`;

function App() {
  return (
    <Container>
      <BoxOne />
      <BoxTwo />
    </Container>
  );
}

export default App;

결과는 다음과 같습니다.

그런데 BoxOne과 BoxTwo의 코드가 background-color를 제외하면 동일합니다.
코드 재사용을 줄일 수 있는 방법이 있겠죠?
바로 리액트 컴포넌트의 props로 값을 전달하는 방식입니다.

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

function App() {
  return (
    <Container>
      <Box bgColor='tomato'/>
      <Box bgColor='aqua'/>
    </Container>
  );
}

export default App;

이렇게 작성해도 결과는 동일합니다!

만약 기존의 코드를 재사용해서 추가로 css style을 작성하고 싶다면? -> 이 방법 또한 가능합니다.

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

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

function App() {
  return (
    <Container>
      <Box bgColor='tomato'/>
      <Circle bgColor='aqua'/>
    </Container>
  );
}

export default App;

Box를 받아 Circle 컴포넌트를 만드는 예제입니다.
기존에 Box에 있는 style을 그대로 사용하기 때문에 props로 color를 전달해서 사용하는 부분도 동일하게 재사용 가능합니다!

Reference

ReactJS 마스터 클래스