ReactJS 숙련: CSS-in-JS와 Styled-Components

01. CSS-in-JS란?

• CSS-in-JS는 자바스크립트 코드로 CSS를 작성하여 컴포넌트를 꾸미는 방식
• 이 방식은 스타일을 조건문이나 변수와 같은 로직을 통해 동적으로 적용할 수 있다는 장점이 있음

02. Styled-Components

• Styled-Components는 리액트에서 CSS-in-JS 방식을 사용하게 해주는 라이브러리
• 기본 사용법: styled 키워드를 사용해 스타일을 작성한 컴포넌트를 생성하고 JSX에서 HTML 태그처럼 사용
• 조건부 스타일링
  • props를 통해 스타일을 동적으로 변경할 수 있음
  • styled component의 props는 앞에 $라는 prefix를 붙임
  • props를 이용한 조건부 스타일링

  • // primary prop이 true일 때와 false일 때의 스타일을 정의
    
    import styled from 'styled-components';
    
    const Button = styled.button`
      background: ${props => props.primary ? 'blue' : 'gray'};
      color: ${props => props.primary ? 'white' : 'black'};
      padding: 10px 20px;
      border: none;
      border-radius: 5px;
      cursor: pointer;
    `;
    
    // 사용 예
    const App = () => (
      <>
        <Button primary>Primary Button</Button>
        <Button>Default Button</Button>
      </>
    );

  • css 헬퍼를 사용한 다른 방식의 조건부 스타일링 예시

  • import styled, { css } from 'styled-components';
    
    const Button = styled.button`
      padding: 10px 20px;
      border: none;
      border-radius: 5px;
      cursor: pointer;
      
      ${props =>
        props.primary &&
        css`
          background: blue;
          color: white;
        `}
    
      ${props =>
        props.secondary &&
        css`
          background: green;
          color: white;
        `}
      
      ${props =>
        !props.primary && !props.secondary &&
        css`
          background: gray;
          color: black;
        `}
    `;
    
    // 사용 예
    const App = () => (
      <>
        Primary Button
        Secondary Button
        Default Button
      </>
    );
    

• 전역 스타일링: GlobalStyles를 사용해 프로젝트 전체에 공통적으로 적용할 스타일을 지정할 수 있음

• import React from "react";
  import styled from "styled-components";
  
  // 스타일된 빈 박스가 컴포넌트로 생성됨
  const StBox = styled.div`
    width: 100px;
    height: 100px;
    border: 1px solid ${(props) => props.borderColor}; // 부모 컴포넌트에서 보낸 props를 받아 사용
    margin: 20px;
  `;
  
  // 박스의 borderColor가 담겨있는 리스트
  const boxList = ["red", "green", "blue"];
  
  // 위의 색 이름(red, green, blue)을 넣으면, 이름을 반환하는 함수
  const getBoxName = (color) => {
    switch (color) {
      case "red":
        return "빨간 박스";
      case "green":
        return "초록 박스";
      case "blue":
        return "파랑 박스";
      default:
        return "검정 박스";
    }
  };
  
  const App = () => {
    return (
      <>
        {boxList.map((boxColor) => {
          return (
            <StBox key={boxColor} borderColor={boxColor}>
              {getBoxName(boxColor)}
            </StBox>
          );
        })}
      </>
    );
  };
  
  export default App;

03. GlobalStyles(전역 스타일링)

• 전역 스타일링은 특정 컴포넌트가 아닌 프로젝트 전체에서 공통적으로 적용되는 스타일을 설정하는 방법입니다.
• createGlobalStyle을 사용해 전역 스타일을 정의하고, 이를 프로젝트에 적용할 수 있습니다.

04. CSS Reset

• CSS Reset은 브라우저마다 다른 기본 스타일을 초기화하여 일관된 스타일링을 보장하는 기법입니다.
• 다양한 요소의 기본 스타일을 초기화하여 우리가 설정한 스타일만 적용되도록 합니다.