React / 스타일링 (2) - Styled Components

CDD (Component Driven Development) : 화면을 독립적이고 재사용 가능한 컴포넌트로 구성하여 개발하는 방법론

 

리액트는 CDD를 할 수 있게 도와주는 라이브러리다. 그래서 js 안에 html을 넣어 컴포넌트를 작성하는 방식으로 개발할 수 있었는데, Styled Components는 css도 포함해서 리액트 컴포넌트로 구성해 개발할 수 있게 도와준다.

 

 

Styled Components

CSS-in-JS 방식(css 내용도 javascript 안에서 작성할 수 있도록 함)의 라이브러리로, 스타일을 리액트 컴포넌트로 만들어서 사용한다.

 

 

Styled Components의 장단점

장점

• CSS도 컴포넌트화 할 수 있음
• CSS와 JS의 상호작용이 쉬움 (아무래도 같은 파일에서 작성하기 때문에)
• Class의 이름을 자동으로 지어줌

단점

• 결국에는 컴포넌트를 생성해야 스타일을 적용할 수 있기 때문에 Javascript의 크기가 무거워짐
• 스타일이 컴포넌트 렌더링 시점에서 적용되기 때문에 렌더링 성능이 저하될 가능성이 있음
• Class 이름이 알아보기 힘듦

 

 

---

 

 

사용 준비

설치

npm install styled-components

 

불러오기

styled components를 사용하고 싶은 위치에서 다음과 같이 import한다.

import styled from "styled-components"

 

익스텐션

styled component를 사용할 때 css 속성 등을 자동완성 시켜주기 때문에 더 편리하다.

https://marketplace.visualstudio.com/items/?itemName=styled-components.vscode-styled-components

vscode-styled-components - Visual Studio Marketplace

 

 

---

 

 

사용 방법

1. 컴포넌트 만들기

const 컴포넌트 = styled.태그종류`
  css속성1 : 속성값;
  css속성2 : 속성값;
`

 

 

예시 1 

 

간단하게 생긴 파란색 버튼 컴포넌트를 만들었다.

 

App.jsx

const BlueButton = styled.button`
  background-color: blue;
  color: white;
  border-radius: 8px;
  border: 1px solid transparent;
  padding: 0.6em 1.2em;
  font-weight: 500;
  cursor: pointer;
`;

function App() {
  return (
    <>
      <div>hello</div>
      <BlueButton>파란 버튼</BlueButton>
    </>
  );
}

 

 

 

예시 2

 

이번에는 자식 요소들을 수직/수평 가운데로 정렬하는 부모요소 Container 컴포넌트를 만들었다.

 

App.jsx

const Container = styled.div`
  width: 100vw;
  height: 100vh;
  display: grid;
  place-items: center;
`;

function App() {
  return (
    <Container>
      <div>hello</div>
      <BlueButton>파란 버튼</BlueButton>
    </Container>
  );
}

 

 

 

---

 

 

2. 컴포넌트 재사용하기

const 컴포넌트 = styled(재사용할 컴포넌트)`
  추가할 css속성1 : 속성값;
  추가할 css속성2 : 속성값;
`

 

 

예시 

 

App.jsx

 

처음에 만든 파란 버튼을 상속받아 큰 파란 버튼의 스타일을 가진 LargeBlueButton 컴포넌트를 만들었다.

const LargeBlueButton = styled(BlueButton)`
  font-size: 2em;
  padding: 2em 3em;
`;

function App() {
  return (
    <Container>
      <div>hello</div>
      <BlueButton>파란 버튼</BlueButton>
      <LargeBlueButton>큰 파란 버튼</LargeBlueButton>
    </Container>
  );
}

 

 

 

 

 

+

 

 

개발자 도구의 Elements 탭을 확인해보면 작성했던 컴포넌트들에게 자동으로 클래스명이 생성되어있는 것을 확인할 수 있다.

이는 styled components에서 내가 컴포넌트에 작성한 스타일 내용들을 css로 적용시킬 때, 자체적으로 임의의 클래스명을 생성해 설정해주는 것을 알 수 있다. 

 

 

 

---

 

 

3. Props 사용하기

const 컴포넌트이름 = styled.태그종류`
  css속성 : ${props => 함수 코드}
`

 

 

예시 1

 

props로 아무 값도 전달하지 않았을 때는 기본값 'black'이 설정되고 있다.

const PropsButton = styled.button`
  background-color: ${(props) => props.backgroundColor || 'black'};
`;

function App() {
  return (
    <Container>
      <PropsButton>Props 버튼</PropsButton>
    </Container>
  );
}

 

 

 

이제 props로 배경 색상 값을 전달하면 잘 적용이 되는 것을 확인해볼 수 있다.

const PropsButton = styled.button`
  background-color: ${(props) => props.backgroundColor || 'black'};
`;

function App() {
  return (
    <Container>
      <div>hello</div>
      <BlueButton>파란 버튼</BlueButton>
      <PropsButton backgroundColor="green">Props 버튼</PropsButton>
    </Container>
  );
}

 

 

 

 

같은 방식으로 다른 속성들도 더 추가해볼 수 있다.

 

const PropsButton = styled.button`
  background-color: ${(props) => props.backgroundColor || 'black'};
  color: ${(props) => props.color || 'white'};
  border: ${(props) => props.border || 'none'};
  border-radius: ${(props) => props.radius || '0'};
  padding: ${(props) => props.padding || '0'};
  width: ${(props) => props.width || 'auto'};
  font-size: ${(props) => props.fontSize || 'auto'};
  font-weight: ${(props) => props.fontWeight || 'auto'};
`;

function App() {
  return (
    <Container>
      <div>hello</div>
      <BlueButton>파란 버튼</BlueButton>
      <PropsButton
        backgroundColor="green"
        color="black"
        border="1px solid black"
        padding="10px">
        Props 버튼
      </PropsButton>
    </Container>
  );
}

 

 

 

예시 2

 

이를 응용해서 rgba()함수 내의 각 값을 props로 받아와 화면에 렌더링해줄 수 있다.

const BackgroundColorDiv = styled.div`
  width: 300px;
  height: 100px;
  background-color: rgba(
    ${(props) => props.input1},
    ${(props) => props.input2},
    ${(props) => props.input3},
    ${(props) => props.input4}
  );
`;

function App() {
  const [input1, setInput1] = useState(0);
  const [input2, setInput2] = useState(0);
  const [input3, setInput3] = useState(0);
  const [input4, setInput4] = useState(0);

  return (
    <Container>
      <input
        type="range"
        value={input1}
        onChange={(e) => setInput1(e.target.value)}
        min={0}
        max={255}
      />
      <span>{input1}</span>
      <input
        type="range"
        value={input2}
        onChange={(e) => setInput2(e.target.value)}
        min={0}
        max={255}
      />
      <span>{input2}</span>
      <input
        type="range"
        value={input3}
        onChange={(e) => setInput3(e.target.value)}
        min={0}
        max={255}
      />
      <span>{input3}</span>
      <input
        type="range"
        value={input4}
        onChange={(e) => setInput4(e.target.value)}
        min={0}
        max={1}
        step={0.01}
      />
      <span>{input4}</span>
      <BackgroundColorDiv
        input1={input1}
        input2={input2}
        input3={input3}
        input4={input4}
      />
    </Container>
  );
}

 

 

실행 화면에서는 gif의 이미지 높이를 줄이기 위해 Container 컴포넌트의 잠시 height를 없앴다..

 

 

Container 컴포넌트에 backgroundColor에 props값들을 설정해두면 배경 색깔 전체가 바뀌는 것을 볼 수 있다.

 

const Container = styled.div`
  width: 100vw;
  height: 100vh;
  display: grid;
  place-items: center;
  background-color: rgba(
    ${(props) => props.input1},
    ${(props) => props.input2},
    ${(props) => props.input3},
    ${(props) => props.input4}
  );
`;

function App() {
  const [input1, setInput1] = useState(0);
  const [input2, setInput2] = useState(0);
  const [input3, setInput3] = useState(0);
  const [input4, setInput4] = useState(0);

  return (
    <Container input1={input1} input2={input2} input3={input3} input4={input4}>
      {/* input은 위와 동일하므로 생략 */}
    </Container>
  );
}

export default App;

 

 

 

 

---

 

 

4. 전역 스타일 설정하기

// import 하기
import {createGlobalStyle} from "styled-components"

// 최상위 컴포넌트에 가져다 사용
const GlobalStyle = createGlobalStyle`
  전역css속성1 : 속성값;
  전역css속성2 : 속성값;
`

 

 

전역 스타일은 다음과 같이 설정할 수 있다.

css파일에 굳이 따로 작성하지 않더라도 최상단 컴포넌트인 App에서 GlobalStyle을 설정 후 불러오면 동일한 효과를 낼 수 있으며,

scss의 변수나 믹스인은 지원하지 않지만, (이는 자바스크립트로 충분히 커버가 가능하다.) 중첩 기능을 사용할 수 있다.

 

const GlobalStyle = createGlobalStyle`
  * {
    margin : 0;
    padding : 0;
  }

  input {
    width : 90%;
  }
`;

function App() {
  const [input1, setInput1] = useState(0);
  const [input2, setInput2] = useState(0);
  const [input3, setInput3] = useState(0);
  const [input4, setInput4] = useState(0);

  return (
    <>
      <GlobalStyle />
      <Container>
        {/* 중략 */}
      </Container>
    </>
  );
}

 

 

 

 

참고
https://www.samsungsds.com/kr/insights/web_component.html
https://www.elancer.co.kr/blog/detail/290