[React] Styled-component

⭐️ Styled-components란?

Styled-components는 JavaScript와 CSS를 결합하여 스타일링할 수 있게 도와주는 라이브러리로, 특히 React 개발 시 컴포넌트 단위로 스타일을 작성할 수 있어서 상성이 좋은 것 같다.

⭐️ Styled-components 사용 방법

사용법은 간단하지만, JavaScript를 모르는 사람에게는 다소 어려울 수 있을것 같다. styled-components는 컴포넌트 상황에서 특히 빛을 발하므로, 컴포넌트로 묶을 영역을 잘 잡아주는 것이 중요하다.

import styled from "styled-components";

const Title = styled.h1`
  font-size: 40px;
  text-align: center;
  font-weight: bold;
  padding-bottom: 20px;
  letter-spacing: 2px;
  font-family: 'Roboto', sans-serif;
`;

function Header() {
  return (
    <header>
      <Title>To Do List</Title>
    </header>
  );
}

export default Header;

이렇게 Title로 만들어 보았다. 참고로 컴포넌트로 만들고 싶다면 꼭 첫글자는 대문자로 사용해야 한다!

Styled-components 사용 예제

Title이라는 styled-component를 정의했다. 이는 기본적으로 h1 태그를 사용하고, 여기에 스타일을 추가한 것이다. styled.h1을 사용하여 h1 태그를 스타일링했다. 다른 태그를 스타일링하려면 styled.button, styled.div 등과 같이 사용할 수 있다.

스타일 적용

일반 CSS를 작성하듯이 스타일을 작성한다. font-size, text-align, font-weight 등 다양한 스타일 속성을 사용할 수 있다.
원래 React에서 스타일을 주려면 객체 형태로 작성해야 했지만, styled-components를 사용하면 일반 CSS 형태로 작성할 수 있어 더욱 직관적이다.

장점

• 가독성: 스타일이 컴포넌트와 함께 정의되어 있어 코드의 가독성이 높아진다.
• 유연성: props를 통해 동적인 스타일을 적용할 수 있다.
• 재사용성: 스타일을 쉽게 재사용하고 관리할 수 있다.

동적 스타일링 예제

다음은 styled-components를 사용하여 여러 개의 박스를 동적으로 렌더링하는 예제다:

import styled from "styled-components";

const StBox = styled.div`
  width: 100px;
  height: 100px;
  border: 1px solid ${(props) => props.borderColor};
  margin: 20px;
`;

const boxList = ["red", "green", "blue"];

const getBoxName = (color) => {
  switch (color) {
    case "red":
      return "빨간 박스";
    case "green":
      return "초록 박스";
    case "blue":
      return "파랑 박스";
    default:
      return "검정 박스";
  }
};

function App() {
  return (
    <>
      {boxList.map((boxColor) => (
        <StBox key={boxColor} borderColor={boxColor}>
          {getBoxName(boxColor)}
        </StBox>
      ))}
    </>
  );
}

export default App;

위 코드에서는 StBox라는 styled-component를 정의하고, boxList 배열을 순회하며 각각의 박스를 렌더링한다. borderColor props를 통해 각 박스의 테두리 색상을 동적으로 설정하고, getBoxName 함수를 통해 각 박스의 이름을 설정한다.

Styled-components를 사용하면 컴포넌트와 스타일을 한곳에서 관리할 수 있어 더욱 직관적이고 유지보수가 용이한 것 같다. React와의 찰떡 궁합 인것 같아 자주 사용할 예정이다.