styled-components

styled-components: JS 안에 CSS를 작성하는 라이브러리 (CSS in JS 관련 라이브러리 중 가장 인기 있는 라이브러리)

→ emotion, styled-jsx

Tagged Template Literal

: 문자열 조합을 더욱 쉽게 할 수 있게 해주는 ES6 문법

• Template Literal 사용 할 때, ${} 안에 일반 문자열이나 숫자가 아닌 객체를 넣는 경우

const object = {a:1};
const text = `${object}`
console.log(text);
// "[object Object]"

Tmeplate Literal: 내장된 표현식을 허용하는 문자열 리터럴 → 여러 줄로 이뤄진 문자열과 문자 보간 기능 사용 가능
• 백틱(` `

• Template Literal에 함수 넣는 경우

const fn = () => true
const msg = `${fn}`;
console.log(msg);
// "() => true"

Template Literal 사용하면서, 그 내부에 넣은 자바스크립트 값 조회하거나 함수 사용하고 싶을 경우 Tagged Template Literal 문법 사용

const red='빨간색';
const blue='파란색';
function favoriteColors(texts, ...values){
	console.log(texts);
    console.log(values);
}
favoriteColors `제가 좋아하는 색은 ${red}과 ${blue}입니다.`

styled-components 사용

• 스타일을 입력함과 동시에 해당 스타일을 가진 컴포넌트 만들 수 있음
• ex) div 스타일링하고 싶으면 styled.div, input 스타일링하고 싶으면 styled.input

import React from "react";
import styled from "styled-components";

const Circle = styled.div`
  witdh: 5rem;
  height: 5rem;
  background: black;
  border-radius: 50%;
`;

function App() {
  return <Circle />;
}

export default App;

• props 넣기

const Circle = styled.div`
  witdh: 5rem;
  height: 5rem;
  background: ${(props) => props.color || "black"};
  border-radius: 50%;
`;

→ props 값을 설정해줬으면, 해당 값을 배경색으로 설정하고 설정 안했으면 배경색을 검정색으로 사용하도록 설정

• 여러 줄의 CSS 코드를 조건부로 보여주고 싶은 경우, css 사용(스타일 내부에서도 다른 props 조회 가능)

const Circle = styled.div`
  witdh: 5rem;
  height: 5rem;
  background: ${(props) => props.color || "black"};
  border-radius: 50%;
  ${(props) =>
    props.huge &&
    css`
      width: 10rem;
      height: 10rem;
    `}
`;

• polished 라이브러리의 스타일 관련 유틸 함수 사용

$ yarn add polished

import { darken, lighten } from "polished";

const StyledButton = styled.button`

  /*색상*/
  background: #228be6;
  &:hover {
    background: ${lighten(0.1, "#228be6")};
  }
  &:active {
    background: ${darken(0.1, "#228be6")};
  }
`;

• ThemeProvider 기능 사용하여 styled-component로 만드는 모든 컴포넌트에서 조회하여 사용할 수 있는 전역적인 값 설정

import React from "react";
import styled, { ThemeProvider } from "styled-components";
import Button from "./components/Button";

const AppBlock = styled.div`
  width: 512px;
  margin: 0 auto;
  margin-top: 4rem;
  border: 1px solid black;
  padding: 1rem;
`;

function App() {
  return (
    <ThemeProvider
      theme={{
        palette: {
          blue: "#228be6",
          gray: "#495057",
          pink: "#f06595",
        },
      }}
    >
      <AppBlock>
        <Button>BUTTON</Button>
      </AppBlock>
    </ThemeProvider>
  );
}

export default App;

→ theme 설정하면 ThemeProvider 내부에 렌더링된 styled-components로 만든 컴포넌트에서 palette를 조회하여 사용 가능

  ${(props) => {
    const selected = props.theme.palette[props.color];
    return css`
      background: ${selected};
      &:hover {
        background: ${lighten(0.1, selected)};
      }
      &:active {
        background: ${darken(0.1, selected)};
      }
    `;
  }}

→ ThemeProvider로 설정한 값은 styled-component에서 props.theme로 조회 가능

• 트랜지션 효과 → CSS Keyframe 사용
  • 사라지는 효과 구현(두 개의 로컬 상태 관리 필요)
    • animate: 현재 트랜지션 효과를 보여주고 있는 중이라는 상태를 의미
    • localVisible: 실제로 컴포넌트가 사라지는 시점을 지연시키기 위한 값