Styled-Components / React 리액트 스타일 컴포넌트 공부하기

📌 설치하기

vscode 터미널에 npm i styled-components

js file에 임포트해준다 : import styled from "styled-components"

 

📌 사용하기 : Html + CSS  vs Styled-Components 비교

import styled from "styled-components";

const Father = styled.div`
  display: flex;
`;
const BoxOne = styled.div`
  background-color: red;
  width: 100px;
  height: 100px;
`;
const BoxTwo = styled.div`
  background-color: blue;
  width: 100px;
  height: 100px;
`;
const Text = styled.span`
  color: white;
`;
const NormalDiv = styled.div``

function App() {
  return (
    <>
      {/* Html + CSS */}
      <div style={{display:"flex"}}>
        <div style={{backgroundColor: "red", width: "100px", height: "100px"}}>
          <span style={{color : "white"}}>BoxOne</span>
        </div>
        <div style={{backgroundColor: "blue", width: "100px", height: "100px"}}>
          <span style={{color : "white"}}>BoxTwo</span>
        </div>
        <div>Html + CSS 로 만든 것</div>
      </div>

      <hr></hr>

      {/* Styled-Components */}
      <Father>
        <BoxOne><Text>BoxOne</Text></BoxOne>
        <BoxTwo><Text>BoxTwo</Text></BoxTwo>
        <NormalDiv>Styled-Components로 만든 것</NormalDiv>
      </Father>
    </>
  );
}

export default App;

📌 결과물 : 정말 말도 안되게 깔끔해졌다! 😊