Scss에 익숙한 분들을 위한 간단 styled-component 사용법

Scss, Sass를 사용할 땐 아래와 같이 사용했을 것이다!

.mainText {
  display: flex;
  margin: 0px;
  padding: 0px;
}

import React from 'react';
import './App.scss';

class App extends React.Component {
  render() {
    return (
      <div className="mainText">
      hello world
      </div>
    );
  }
}

export default App;

 

 

 

하지만 styled-component는 다음과 같이 사용한다.

import React from 'react';
import styled from 'styled-components';

const MainText = styled.div`
  display: flex;
  margin: 0px;
  padding: 0px;
`;

function App() {
  return (
    <MainText>
    hello world
    </MainText>
  );
}

export default App;

아직 익숙하지않은 분들은 일단 익숙한 걸로 구현한 후 하나씩 styled-component로 바꿔봐도 괜찮다. (본인이 그랬음)
겁먹지 말고 천천히 하나씩 바꿔보면 금방 할 수 있어요!!