Styled-component

CSS-in-JS 라이브러리

JavaScript 파일에서 CSS를 작성하여 React 컴포넌트 스타일을 관리할 수 있도록 설계된 도구
각 컴포넌트 스타일이 고유하게 캡슐화
React 프로젝트에서 CSS 충돌 문제를 방지하고 스타일과 로직을 하나의 파일에서 관리할 수 있도록 도와줌

주요 특징

1. CSS-in-JS
   JavaScript 내에서 CSS를 작성할 수 있어서, 스타일과 로직을 같은 파일에서 관리 가능
   JSX와 자연스럽게 통합됨

2. 컴포넌트 캡슐화
   고유 클래스 이름을 자동 생성하여 스타일 충돌을 방지함
   스타일이 해당 컴포넌트에만 적용됨

3. 동적 스타일링 지원
   props나 상태값을 기반으로 조건부 스타일을 동적으로 작성 가능

4. 표준 CSS 문법 사용

5. 스타일 재사용성이 우수함

6. 글로벌 스타일 지정가능
   createGlobalStyle을 사용해 앱 전체에 적용되는 글로벌 스타일을 정의 가능

    import { createGlobalStyle } from 'styled-components';
   
     const GlobalStyle = createGlobalStyle`
       body {
         margin: 0;
         font-family: 'Arial', sans-serif;
         background-color: #f4f4f4;
       }
   
       h1 {
         color: #333;
       }
     `;
   
     function App() {
       return (
         <>
           <GlobalStyle />
           <h1>Styled-components Example</h1>
         </>
       );
     }
   
     export default App;
   

7. 스타일 확장
   styled를 사용해 기존 컴포넌트를 확장하여 스타일을 추가 가능

   import styled from 'styled-components';
   
   // 기본 버튼
   const Button = styled.button`
     background-color: #3498db;
     color: white;
     padding: 10px 20px;
     border-radius: 5px;
   `;
   
   // 확장된 버튼
   const LargeButton = styled(Button)`
     padding: 20px 40px;
     font-size: 1.5em;
   `;
   
   function App() {
     return (
       <div>
         <Button>Default Button</Button>
         <LargeButton>Large Button</LargeButton>
       </div>
     );
   }
   
   export default App;
   

8. ThemeProvider을 사용해 공통테마 적용가능

   import styled, { ThemeProvider } from 'styled-components';
   
     const theme = {
       colors: {
         primary: '#3498db',
         secondary: '#2ecc71',
       },
     };
   
     // 스타일 컴포넌트
     const Button = styled.button`
       background-color: ${(props) => props.theme.colors.primary};
       color: white;
       padding: 10px 20px;
     `;
   
     function App() {
       return (
         <ThemeProvider theme={theme}>
           <Button>Theme Button</Button>
         </ThemeProvider>
       );
     }
   
     export default App;
   

9. keyframes를 사용해 CSS 애니메이션 작성가능

    import styled, { keyframes } from 'styled-components';
   
    // 애니메이션 정의
    const fadeIn = keyframes`
      from {
        opacity: 0;
      }
      to {
        opacity: 1;
      }
    `;
   
    // 애니메이션 적용
    const AnimatedDiv = styled.div`
      animation: ${fadeIn} 2s ease-in-out;
    `;
   
    function App() {
      return <AnimatedDiv>Fade In Animation</AnimatedDiv>;
    }
   
    export default App;
   

장점

1. 스타일 캡슐화 : 고유 클래스 이름이 자동 생서오디어 스타일 충돌 방지
2. 컴포넌트 기반 : 스타일과 로직이 함께 정의되어 가독성과 유지보수가 용이함
3. 동적 스타일 : props와 상태값을 기반으로 조건부 스타일링 가능
4. CSS 문법 지원 : 기존 CSS 문법 그대로 사용 가능
5. 테마관리 : ThemeProvider를 통해 앱 전체에서 일관된 테마 관리 가능

단점

1. 런타임 성능
   컴포넌트가 렌더링될때 스타일이 생성되므로 런타임 성능이 저하될 수 있음
   → 서버사이드 렌더링이나 Babel 플러그인 사용으로 해결 가능
2. 파일 크기
   프로젝트가 커질 수록 스타일 파일의 크기가 증가할 수 있음