1. styled-components란?

css, scss 파일을 밖에 두고 태그나 id, class 이름으로 가져와서 쓰지 않고 동일한 컴포넌트에서 컴포넌트 이름을 쓰듯이 스타일을 지정하는 것을 styled-components라고 부른다. css파일을 밖에 두지 않고 컴포넌트내부에 넣기 때문에 css가 전역으로 중첩되지 않도록 만들어준다.

styled-components 설치

npm install styled-components

styled-components 사용예시

import React, { useState } from "react";
import styled from "styled-components";

function Nav() {
  const [category, setCategory] = useState("");

  return (
    <NavWrap active = {email.length}>
      <Button>Hey,</Button>
      <RealButton color="blue">Im Real Button</RealButton>
    </NavWrap>
  );
}

const NavWrap = styled.div`
  background: ${({ active }) => {
    if (active) {
      return "white";
    }
    return "#eee";
  }};
  color: black;
`;

const Button = styled.button`
  width: 150px;
  padding: 50px;
`;

// Button 컴포넌트 상속
const RealButton = styled.Button`
  // RealButton  컴포넌트에 color로가는 props가 있으면
그 값 사용, 없으면 'blue' 사용
  color: ${props => props.color || "blue"};
`;

export default Nav;
 

styled component 만드는 법

const 컴포넌트명 = styled.태그명 스타일을 넣은 뒤
``; 안에 width, color등을 넣고 사용하면 된다.

styled에 props 적용하는 법

위의 예시를 보면 category라는 stste값에 따라 NavWrap에 prop으로 내려준 active라는 값이 true/false로 바뀌게 되는데, props에 따라 스타일을 변경할 수 있다.

1 ) 단위 스타일링

 const StyledDiv = styled.div`
    background-color: black;
    width: 100px;
    height: 100px;
  `;

  return <StyledDiv></StyledDiv>

2 ) 조건부 스타일링

 const LoginDiv = styled.div`
    background-color: black;
    width: 100px;
    height: 100px;
    ${({ login }) => {
      return login ? `display: none` : null;
    }}
  `;

  return <LoginDiv login={true}></StyledDiv>;

component의 props를 전달 받아서 사용하는 것이 가능한데, 템플릿 리터럴 내에서 js를 사용하는 것과 같은 형식이며, 내부에서 선언된 함수는 props를 파라미터로 실행한다.

3 ) 확장 스타일링

const Container = styled.div`
    max-width: 800px;
    width: 100%;
    height: 150px;
  `;

  const newContainer = styled(Container)`
    background-color: black;
  `;

  const realContainer = styled(Container)`
    background-color: red;
  `;

  return (
    <>
      <newContainer />
      <realContainer />
    </>
  );

2. theme

스타일링을 시작하기 앞서, 자주 사용하게 될 색상코드, 사이즈, 폰트, 미디어 쿼리 같은 정보를 변수로 생성해서 사용하면 스타일관리가 가능하다.
전체적으로 프로젝트에서 사용할 목적으로 공통된 변수 모음 객체를 theme이라 부른다.

const fontWeight = {
  light: 300,
  bold: 600,
};
const colors = {
  white: '#FFFFFF',
  lightGray: '#AEB5BC',
  gray: '#676D74',
  boldGray: '#353A3F',

};

const flex = {
  flexBox: (direction = 'column', align = 'center', justify = 'center') => `
  display: flex;
  flex-diection: ${direction};
  align-items: ${align};
  justify-content: ${justify};
  `,
};
const theme = {
  fontWeight,
  colors,
  flex,
};

export default theme;

3. global-style

style-components에서는 component 단위가 아닌 HTML element단위로 적용되는 style을 global-style에서 관리한다.
ex) reset, normalize 등의 기본적인 스타일이 이경우라고 할 수 있다.

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

const GlobalStyle = createGlobalStyle`
    ${reset}

    * {
        box-sizing: border-box;
    }

    body{
        padding: 0;
        margin: 0;
        font-family: 'Noto Sans KR', sans-serif;
    };

    button{
        display: flex;
        cursor: pointer;
        outline: none;
    };

export default GlobalStyle;