기본적인 설정 방법

import styled from 'styled-components';

function App() {
  
  return (       
    <div style={{display: "flex"}}>
      <div style={{backgroundColor: "green", width: 100, height: 100 }}></div>
      <div style={{backgroundColor: "blue", width: 100, height: 100 }}></div>
    </div>
  );
}

기존에 우리가 알고 있는 기본 정익 방식 중 하나이다. 불편하다고 하기에는 자주 사용하는 방식이다보니 싫다 좋다의 개념은 아니었다.

styled components 적용하기

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

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

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

기본적인 적용 방법은 위에 코드와 같다 직관적으로 훨씬 더 깔끔하고 스타일을 적용하는 부분과 분리 되있다 보니 직관적으로도 보기 편하다. 또한 scss나 css 같은 경우 파일을 따로 만들어 import 하는 방식이라 번갈아 보기 불편한 점 또한 styled components를 이용하면 해소가 되고 className을 사용안하는 것도 편리합니다🤩 정말 멋진 것 같습니다.