search

WONILLISM / react-masterclass

React Master Class(feat. Nomad Coders)
0 stars 0 forks source link

2.2 Adapting and Extending #2

Open WONILLISM opened 2 years ago

WONILLISM commented 2 years ago

같은 기능을하는 컴포넌트를 중복해서 쓰고싶지 않을 때는 props를 이용하면 된다.

import styled from 'styled-components';

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

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

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

export default App;
WONILLISM commented 2 years ago

컴포넌트를 확장함에 있어서 상속을 받는 방법도 있다.

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;