Styled-Components 사용법

한 몇 주 전부터 react에 css를 임포트 하는 방법 말고 뭐가 있을지 계속 찾고 있다가
마침 이번에 열린 해커톤으로 styled-components라는 걸 알게되었다.

먼저 이건 스타일 컴포넘트인 이름처럼 css를 컴포넌트로 바꿔 쓸 수 있게 해주는 기능이며 이번 블로그에선
파일을 하나 더 만들어 import 하는 방식 두가지를 설명해줄려고 한다.

이걸 쓸려면 먼저 vsc에서 install을 해줘야 하는데 간단히 npm으로 install할 수 있다.

npm i styled-components

이 코드를 vsc 터미널에 입력해주고 package.json 파일에 들어가보면

}
...
	"react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-router-dom": "^6.4.3",
    "react-scripts": "5.0.1",
    "recharts": "^2.1.16",
    "styled-components": "^5.3.6",
...
}

이렇게 잘 설치 되있는걸 볼 수 있다.

그럼 이걸 어떻게 쓰느냐 인데 나는 다른 파일에 한꺼번에

export const (변수명) ,,,,

이런 식으로 export를 시켜 다른 파일에서 import하여 쓸 수 있도록 하였다.

import React, { useState } from "react";

const Example = () => {
  const [val, setVal] = useState(0);
  return (
    <>
      <div>{val}</div>
      <button
        onClick={() => {
          setVal((e) => e + 1);
        }}>
        +
      </button>
    </>
  );
};

export default Example;

우선 간단하게 react에 버튼을 만든 뒤, 버튼을 클릭할 때 값을 바뀌게 하고 싶었기 때문에
useState와 onClick을 사용하여 버튼을 클릭할 때마다 값이 1씩 증가하게 하였다.

이렇게 아주 잘 나오는 것을 확인할 수 있다.

이제 styled-component를 사용하여 button을 꾸며 주자.

import styled from "styled-components";

export const (변수명) styled.(html  요소)`
	border-radius : 20px;
    ....
`;

export...

위에 보이는 것이 styled-commponent의 기본 문법이다.
변수명을 쓰고 styled.(자신이 원하는 태그)에 백틱 ``을 붙여 css 문법을 쓴다.

export const MyBtn = styled.button`
  box-shadow: none;
  background-color: blue;
  font-size: 1.2em;
  color: white;
`;

export const ValDiv = styled.div`
  font-size: 2em;
  color: red;
`;

나는 버튼을 스타일하고 싶은 것이기 때문에 html 요소에 button을 넣고, 위에 뜨는 숫자도 스타일하기 위해
밑에는 ValDiv라는 이름을 가진 div요소를 띈 컴포넌트를 선언 해주었다.

이것들을 import 시키려면 총 두 가지의 방법이 있는데
첫번째 방법으론 컴포넌트를 하나하나씩 import 해주는 방식이다.

import { MyBtn, ValDiv } from "./StyleEx";

두번째 방법으론 컴포넌트 전체를 한꺼번에 import 해주는 방식이다.

import * as S from "./StyleEx";

두가지의 방식에는 각각 호출하는데에 차이점이 있는데,

<ValDiv>{val}</ValDiv>

우선 첫번째 방식은 함수를 하나하나 불러오는 것이기 때문에 import 했던 함수 그대로 html 태그에 넣어
쓸 수 있다.

<S.ValDiv>{val}</S.ValDiv>

두번째 방식은 전체를 한꺼번에 부르는 대신 as 뒤에 선언한 S를 붙여 html 태그에 넣어야지 쓸 수 있다.

따라서 만약 첫번째 방식대로 import를 하면

import React, { useState } from "react";
import { MyBtn, ValDiv } from "./StyleEx";

const Example = () => {
  const [val, setVal] = useState(0);
  return (
    <>
      <ValDiv>{val}</ValDiv>
      <MyBtn
        onClick={() => {
          setVal((e) => e + 1);
        }}
      >
        +
      </MyBtn>
    </>
  );
};

export default Example;

이렇게 코드를 작성 할 수 있고,

두번째 방식대로 import를 하면

import React, { useState } from "react";
import * as S from "./StyleEx";

const Example = () => {
  const [val, setVal] = useState(0);
  return (
    <>
      <S.ValDiv>{val}</S.ValDiv>
      <S.MyBtn
        onClick={() => {
          setVal((e) => e + 1);
        }}
      >
        +
      </S.MyBtn>
    </>
  );
};

export default Example;

이렇게 코드를 작성 할 수 있다.

이렇게 사진으로 둘 다 똑같은 결과를 같는다는 것을 알 수 있다.




따라서 import를 하는 방법은 두가지이지만 결과가 같아 취향 차이이며 어떤 방식으로 하든
상관없다는 걸 알 수 있다.