react styled-components 사용해보기

import React from "react";
import "./App.css";
import styled from "styled-components";

const color = "red";

const Component = styled.div`
  display: ${(props) => (props.isLoaded ? "block" : "none")};
  color: ${color};
`;

// 컴포넌트 상속받기
const Wrapper = styled(Component)`
  background-color: gray;
  margin: 20px;
`;

function App() {
  return (
    <Wrapper isLoaded>
      <Component isLoaded>complete</Component>
    </Wrapper>
  );
}

export default App;

 

Styled-Components를 활용하면 컴포넌트를 생성 및 만든 컴포넌트를 상속해서 활용이 가능하다

 

중복을 최소화할수 있는 장점이 있다.