Styled-Components 배우기

1 분 소요

🖥 Styled-components 관련 모든 글 보기

안녕하세요. Nerd Lee 입니다.

이번 글은 styled-components를 설치하고 어떻게 사용하는 지에 대해서 한 번 알아보도록 하겠습니다. 기본적으로 react 프레임워크가 있어야합니다.

Styled-Components

1. 설치하기

React.js 설치 방법

  • 기본적으로 npm 패키지가 설치되어 있어야 합니다.
cd desktop (desktop 폴더로 이동)
npx create-react-app {폴더 이름} ( 설치 )

styled-components 설치

  • vs code로 설치 한 리액트 프로젝트를 열어서 터미널로 설치해주세요.
npm i styled-components

2. 기본 문법을 사용해보기

기본 문법 작성 (src -> App.js )

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


  • import 된 부분을 전부 삭제하고, 이렇게 코드를 작성해볼게요.
    flex로, 정렬을 해주고, 두 개의 정사각형인 box를 만들어 준다라고 얼추 눈에 보이시죠?
    그런데.. 너무 가독성이 떨어집니다. div 태그만 보이기 때문에, 가끔은 헷갈릴 때도 있죠.
    그래서 사용하기 좋은 것이 styled-components 입니다.!

3. 위의 코드 이쁘게 변경하기

styled-components가 설치되셨다면 밑에 처럼 코드를 작성해보세요.

import styled from "styled-components";

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

const ChlidBoxOne = styled.div`
  background-color: pink;
  width: 100px;
  height: 100px;
`;

const ChlidBoxTwo = styled.div`
  background-color: black;
  width: 100px;
  height: 100px;
`;

function App() {
  return (
    <Parent>
      <ChlidBoxOne />
      <ChlidBoxTwo />
    </Parent>
  );
}

export default App;
  • 아주 깔끔해졌죠?ㅎㅎㅎ
    styled.div로 div 태그와 같다는 것을 명시해주고 그 안에 css 속성값들을 넣어줘서
    class 형식으로 사용이 가능해지기 때문에 가독성도 좋아져서 이게 어떤식의 코드인지도 명확해지게 됩니다. 또한 className을 알아서 styled-components가 랜덤하게 만들어주기 때문에 className도 걱정 할 필요가 없어집니다.


이 글이 도움이 되셨다면 댓글 부탁드립니다^^
다음 글로 찾아오겠습니다!

참고