[react/공부] styled-componenet

Styled Components 알아보기

 

 

---

        Styled Components란? 

JavaScript 파일 내에서 CSS를 작성할 수 있도록 도와주는 라이브러리다.

컴포넌트 단위로 스타일을 관리할 수 있어서 유지보수가 쉽고 가독성이 좋다.

 

---

 

        세팅하기 

01 패키지

먼저, 사용하고자 하는 프로젝트 터미널에서 패키지를 설치한다.

yarn add styled-components

 

 

 

02 확장 프로그램 추가

왼쪽 블럭처럼 생긴.. 확장프로그램 설치하는 곳으로 가서

'VScode-styled-components'

를 검색한 후 설치한다.

 

---

 

        사용하기 

01 Import

import styled from 'styled-components';

사용할 컴포넌트의 상단 부분에서 styled-components를 불러온다.

 

 

02 기본적인 스타일 정의

const StBox = styled.div`
  width: 100px;
  height: 100px;
  background-color: lightgray;
`;

CSS 문법을 그대로 사용하고, **속성마다 세미콜론을 꼭 붙여야 한다! 그렇지 않으면 오류가 남..

 

 

03 사용 예시

function App() {
  return (
    <StBox>내용</StBox>
  );
}

위와 같이 태그 형태로 변수명을 사용해주면 된다.

 

 

---

        응용하기 

01 Props 활용 스타일 정의

styled component를 사용하여 다양한 상황에 응용할 수 있는데, 먼저 Props를 사용하여 동적으로 스타일을 변경할 수 있다.

우선 아래와 같이 스타일을 정의해준다.

const StBox = styled.div`
  width: 100px;
  height: ${props => props.height || '50px'}; // 기본값 설정 가능
  background-color: ${props => props.bgColor || 'lightgray'};
`;

|| 이후에 기본값을 설정해주면 되고, 생략해도 된다.

 

 

 

02 사용 예시

function App() {
  return (
    <StBox height="150px" bgColor="blue">내용</StBox>
  );
}

 

 

03 배열과 map을 활용한 스타일 적용

아래와 같이 .map 등을 사용하여 원하는 스타일을 각각 적용해 사용할 수도 있다! 너무 굳

const boxList = ['50px', '100px', '150px'];

function App() {
  return (
    <>
      {boxList.map((size, index) => (
        <StBox key={index} height={size}>Box {index + 1}</StBox>
      ))}
    </>
  );
}

 

 

---

 

컴포넌트마다 개별 CSS 파일을 만드는 게 번거로웠는데,

Styled Components를 사용하면 코드 내에서 직접 스타일을 관리할 수 있어서 확실히 편한 것 같다.

그 외에도 js에서 조건이나 상황에 따라 스타일을 변경하기도 쉬워서 너무 굳,,