📌styled-components

• 스타일을 작성하기 위한 라이브러리
• 컴포넌트 기반으로 스타일을 정의하고 관리 가능

사전 설치

1. 패키지 : 2개 set로 설치해서 전역 스타일링을 같이
   

• styled-components
• styled-reset
  크로스브라우징을 위해 스타일링 초기화

2. 익스텐션

• vscode-styled-components
  
  모두가 사용하는 VSCode 에서 조금 더 잘 활용하기 위해 설치 => 자동완성, 색 지정 가능 등

1. 전역 스타일링

• 개념 : 전체 애플리케이션에 적용되는 공통 스타일링
• 장점 : 전체 앱의 일관된 스타일 유지 가능

예시 : 전역스타일링을 통해 reset.css를 적용

import { createGlobalStyle } from 'styled-components';
import reset from 'styled-reset';

const GlobalStyle = createGlobalStyle`
  ${reset}

  /* 추가적인 전역 스타일 정의 */
  body {
    font-family: 'Arial', sans-serif;
    color: #333;
  }
`;

2. 조건부 스타일링

• 개념 : 컴포넌트의 상태나 props에 따라 스타일이 동적으로 변경되는 것
• 장점 : 컴포넌트 상태에 따른 시각적 변화 구현 가능

예시

const Button = styled.button`
  background-color: ${props => props.primary ? 'blue' : 'white'};
  color: ${props => props.primary ? 'white' : 'blue'};
  padding: 8px 16px;
  border: 1px solid blue;
  border-radius: 4px;
`;