[React] 12. Styled-components (+ 한 컴포넌트에 css파일 적용법)

이전 글 ▼

0. 2023.05.05 - [🌌 | WEB DEV/React] - [React] 0. React를 사용하는 이유 & 초기 세팅

1. 2023.05.07 - [🌌 | WEB DEV/React] - [React] 1. JSX

2. 2023.05.26 - [🌌 | WEB DEV/React] - [React] 2. state (변수, array, object)

2-1. 2023.05.27 - [🌌 | WEB DEV/React] - [React] 2-1. array state 정렬하기 ( .sort()활용)

3. 2023.05.28 - [🌌 | WEB DEV/React] - [React] 3. 컴포넌트 (Component)

4. 2023.05.28 - [🌌 | WEB DEV/React] - [React] 4. 동적인 UI 제작하기

5. 2023.05.28 - [🌌 | WEB DEV/React] - [React] 5. 반복되는 부분 축약하기 (map)

6. 2023.05.29 - [🌌 | WEB DEV/React] - [React] 6. props

7. 2023.07.03 - [🌌 | WEB DEV/React] - [React] 7. 이미지 삽입하기(css, html, public폴더에서 가져오기)

8. 2023.07.06 - [🌌 | WEB DEV/React] - [React] 8. 다른 파일에서 데이터 가져오기

9. 2023.07.09 - [🌌 | WEB DEV/React] - [React] 9. 라우팅-1 (react-router-dom세팅, Routes, Route, Link)

10. 2023.07.10 - [🌌 | WEB DEV/React] - [React] 라우팅-2 (useNavigate, 404page, Nested Routes, Outlet)

11. 2023.10.03 - [🌌 | WEB DEV/React] - [React] 11. 라우팅-3 양산형 라우팅

 

React 혹은 React-Native 개발에 많이 활용하는 styled-components에 대해서 알아보자!

 

1. styled-components란?

css 사용시 불편한 점

html에 스타일을 추가해주고 싶을때는 css를 이용한다.

하지만 작업을 하다보면 몇가지 불편함을 겪었을 것이다.

[CSS파일만 사용할 때 불편했던 점들..]
- 현재 작업하는 컴포넌트에 스타일 적용 중이었지만 class명 중복으로 인해 깨짐.
- 규모가 커졌을 때 class 명을 중복되지 않게 계속 생각해줘야함.
- CSS파일이 길어졌을 때 수정하기 번거로움.

 

styled-components는 스타일을 먼저 주입해서 컴포넌트를 만들기 때문에

이러한 불편함을 해소할 수 있다.

 

styled-components의 장단점

1) 장점

- CSS파일 없이 JS파일에서 스타일 적용 가능

- 이 방법을 이용하면 스타일이 다른 JS파일에 적용되지 않음 (↔일반 css파일은 모든 파일에 적용됨)

- 페이지 로딩시간 단축 가능 (css 파일 로딩을 안하게 된다면!)

 

2) 단점

- JS 파일이 복잡해짐 (일반 컴포넌트와 구분해야함)

- 디자이너팀과 협업 이슈

- 파일간 스타일 중복이 많이 필요한 경우에는 의미 없음

 

+) css파일  한 컴포넌트에만 적용하기 (css 모듈화)

일반적인 css파일은 전체 파일에 적용된다.

하지만 모듈화를 하면 한 파일에만 적용하도록 할 수 있다.

 

컴포넌트명.module.css

 

위와 같이 파일명을 설정하면 지정한 컴포넌트명을 가진 js파일에만 적용된다.

 

 

---

2. 사용해보기

1) 설치하기

npm install styled-components

터미널에서 npm을 이용해 설치한다.

 

2) 컴포넌트 생성 단계

[생성 절차]
1. import 해오기
2. styled

 

(1) import 해오기

import styled from "styled-components"

컴포넌트를 삽입할 파일에 위처럼 import 한다.

 

(2) 컴포넌트 만들기

① styled.태그명 으로 컴포넌트를 생성한다.

    eg.) styled.div, styled.p 등 ...

② styled.태그명 뒤에 두 개의 ``(백틱) 안에 스타일을 적용한다. -> 컴포넌트 생성

③ 변수에 담고 <변수명>의 태그를 원하는 곳에 위치시킨다. (컴포넌트 이므로 동일하게 이용)

 

예시

import styled from "styled-components"

let SkyBox = styled.div`
  background: rgb(0, 149, 212);
  padding: 20px;
  border-radius: 10px;
`;


function Page(){
  return(
    <>
      ...
      <SkyBox/>
    </>
  )
}

 

결과

 

(3) 재활용 가능한 컴포넌트로 만들기

위에서 만든 div 박스의 색만 다르게 만들고 싶다고 가정하고

재활용이 가능하도록 만들어보자!

 

컴포넌트 props를 전달하는 것처럼 styled-components도 props를 이용할 수 있다.

 

styled.태그명`
  ... ${props => props.변수명}
`;

 

정의한 변수명을 가진 props를 전달해주면 된다.

아래의 예시를 보며 확인해보자!

 

예시 1

import styled from "styled-components"

let SkyBox = styled.div`
  background: ${props => props.background};
  padding: 20px;
  border-radius: 10px;
`;


function Page(){
  return(
    <>
      ...
      <SkyBox background = "gold"/>
      <SkyBox background = "cyan"/>
    </>
  )
}

 

결과 1

 

background라는 이름으로 작명한 props를 전달하여 위와 같은 결과를 얻었다!

 

 

예시 2

import styled from "styled-components"

let SkyBox = styled.div`
  background: ${props => props.background};
  color : ${props => props.background === "black" ? "#efefef" : "#333"};
  padding: 20px;
  border-radius: 10px;
`;


function Page(){
  return(
    <>
      ...
      <SkyBox background = "black">Hello</SkyBox>
      <SkyBox background = "white">Hello</SkyBox>
    </>
  )
}

 

결과 2