styled-Component

오늘 학습한 것

• styled-component 기초 학습

사용법

1. 설치

npm

npm i styled-components

yarn

yarn add styled-components

2. import

• 사용하고자 하는 jsx에서 styled-components import

<.jsx>
  
import styled from "styled-components";

3. styled component 생성

• jsx의 컴포넌트 함수 위에 선언
• 변수 첫 글자는 대문자로 하자!
• styled.{태그 이름}`` 이 기본 형태이다
• VS code extension에서 vscode-styled-components 를
  적용하면 css 파일에 작성할 때처럼 지원을 해준다.

<DefaultButton.jsx>
  
import styled from "styled-components";
  
const Box = styled.div`
  display: flex;
  justify-content: center;
  align-items: center;
`

const DefaultBtn = styled.button`
  padding: 1rem;
  width: fit-content;
  background-color: #1f1f1f;
`
  
// 컴포넌트 함수
export function DefaultButton() {
    ~~~
  }

styled-component 사용

• 일반 Component 처럼 사용한다.

<DefaultButton.jsx>
  
import styled from "styled-components";
  
const Box = styled.div`
  display: flex;
  justify-content: center;
  align-items: center;
`

const DefaultBtn = styled.button`
  padding: 1rem;
  width: fit-content;
  background-color: #1f1f1f;
`
  

export function DefaultButton() {
  <>
    <Box>
      <DefaultBtn>기본 버튼</DefaultBtn>
    </Box>
  </>
}

styled-component 활용

• CSS-in-JS의 이름에 맞게 JS문법 사용 가능
• 컴포넌트라서 props 사용 가능

props 사용 시 주의사항

• 컴포넌트에 props를 전달할 때
  props 이름 앞에 $를 붙여야 한다.
  이유는 브라우저가 볼 때 $를 붙이지 않은 props를
  DOM 요소의 속성으로 적용하기 때문

const Box = styled.div`
  display: flex;
  justify-content: center;
  align-items: center;
`
// $를 안 붙이고 prop을 전달하면
 <Box backgroundColor="red">
// 브라우저가 볼 때 div의 attribute로 인식
 <div backgroundColor="red"> 

활용 1. props를 사용하여 렌더

• styled-component에 props를 전달
• styled-component 선언부의 백틱(``)안에서
  ${(props) => props.이름} 으로 사용
  (Template literal 문법)

예). props를 사용하여 빨간색 border 를 적용해보자.

<DefaultButton.jsx>
  
import styled from "styled-components";
  
const Box = styled.div`
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid ${(props) => props.$borderColor} // props 사용 
`

const DefaultBtn = styled.button`
  padding: 1rem;
  width: fit-content;
  background-color: #1f1f1f;
`
  

export function DefaultButton() {
  <>
    <Box $borderColor = "red"> // Box 컴포넌트에 props 전달
      <DefaultBtn>기본 버튼</DefaultBtn>
    </Box>
  </>
}

활용 2. props를 사용하여 효율적인 UI 그리기

예). props에 따라 다른 색과 내용을 가진 상자를 생성

<StyledVelog.jsx>
  
import React from "react";
import styled from "styled-components";

const Box = styled.div`
  width: fit-content;
  height: fit-content;
  padding: 1rem;
  border-radius: 5px;
  margin-block: 1rem;
  border: 3px solid ${(props) => props.$borderColor};
`;

const ColorBtn = styled.button`
  padding: 0.5rem;
  width: fit-content;
  border-radius: 5px;
  background-color: ${(props) => props.$backgroundColor};
  color: white;
`;

// 상자에 전달할 props
const boxColor = ["red", "blue", "green"];

// 색깔에 따라 상자 안의 내용을 return 하는 함수
const getBoxName = (color) => {
  switch (color) {
    case "red":
      return "빨간 상자";
    case "blue":
      return "파란 상자";
    case "green":
      return "초록 상자";
    default:
      return "빈 상자";
  }
};

export default function StyledVelog() {
  return (
    <>
      // 색상이 담긴 Array를 활용하여 반복적인 UI 생성
      {boxColor.map((color) => {
        return (
          // 색상에 따른 CSS와 내용을 다르게
          <Box $borderColor={color}>
            <ColortBtn>{getBoxName(color)} 버튼</DefaultBtn>
          </Box>
        );
      })}
    </>
  );
}

결과

Pseudo-Selectors

• &: 를 사용하여 Pseudo 선택자 사용

const DefaultBtn = styled.button`
  padding: 0.5rem;
  width: fit-content;
  border-radius: 5px;
  background-color: ${(props) => props.$backgroundColor};
  color: white;

  &:hover {
    color: black;
  }
`;

더 다양한 Pseudo-Selectors

Pseudo-Selectors

느낀점

• 나는 일반 CSS / module.css만 사용해봤기 때문에
  styled-component는 너무 생소하고
  JSX의 코드가 너무 길어져서 왜 이걸 쓰나.. 싶었지만,
  프로젝트가 커질수록 styled-component가
  유지 / 보수에 더 좋고
  컴포넌트 재사용성도 올라간다고 하니
  잘 배워둬야겠다.