학습목표

• Styled Components를 사용하여 꾸미기 (CSS in JS)
• Bootstrap을 사용하여 효율적으로 꾸미기

CSS in JS

: style 정의를 CSS 파일이 아닌!! JS로 작성된 컴포넌트에 삽입하는 기법

• React와 같은 모던 JS 라이브러리가 인기를 얻으면서 등장
  • 컴포넌트 기반 개발 방법
  • 웹페이지를 여러 개의 컴포넌트, 즉 재활용이 가능한 빌딩 블록으로 분리
• 각 컴포넌트에 HTML, CSS, JS를 몽땅 때려 박는 패턴
  • React는 JSX를 사용해서 JS에 HTML 포함
  • CSS-in-JS 라이브러리를 사용하여 JS에 CSS도 포함 가능!
    • styled components, emotion, styled-jsx

Styled Components

사용 방법

• styled 함수 import 해서 사용

  import styled from "styled-components";
  import Button from "./Button";
  
  styled.button`
  	// <button> HTML 엘리먼트에 대한 스타일 정의
  `;
  
  styled(Button)`
  	// <Button> React 컴포넌트에 대한 스타일 정의
  `;
  

• 고정 스타일링

  import React from "react";
  import styled from "styled-components";
  
  const StyledButton = styled.button`
    padding: 6px 12px;
    border-radius: 8px;
    font-size: 1rem;
    line-height: 1.5;
    border: 1px solid lightgray;
    color: gray;
    background: white;
  `;
  
  function Button({ children }) {
    return <StyledButton>{children}</StyledButton>;
  }
  

props 사용하기

: React 컴포넌트에 넘어온 props를 사용하여 가변 스타일링

1. 첫번째 방법

   import React from "react";
   import styled from "styled-components";
   
   const StyledButton = styled.button`
     padding: 6px 12px;
     border-radius: 8px;
     font-size: 1rem;
     line-height: 1.5;
     border: 1px solid lightgray;
   
     color: ${(props) => props.color || "gray"};
     background: ${(props) => props.background || "white"};
   `;
   
   function Button({ children, color, background }) {
     return (
       <StyledButton color={color} background={background}>
         {children}
       </StyledButton>
     );
   }
   

   • JS의 || 연산자를 사용
     • props가 넘어오지 않은 경우, 기존에 정의한 속성이 유지되도록

2. 두번째 방법

   import React from "react";
   import styled, { css } from "styled-components";
   
   const StyledButton = styled.button`
     padding: 6px 12px;
     border-radius: 8px;
     font-size: 1rem;
     line-height: 1.5;
     border: 1px solid lightgray;
   
     ${(props) =>
       props.primary &&
       css`
         color: white;
         background: navy;
         border-color: navy;
       `}
   `;
   
   function Button({ children, ...props }) {
     return <StyledButton {...props}>{children}</StyledButton>;
   }
   

   • prop에 따라 바꾸고 싶은 CSS 속성이 여러 개인 경우
     • css 함수를 사용해서 여러 개의 CSS 속성을 묶어서 정의
   • JS의 && 연산자를 사용
     • primary prop이 존재하는 경우에만 css로 정의된 스타일링 적용

사용하는 이유