[TodoList] styled-components, createGlobalStyle , Tagged template literal

• 템플릿 리터럴 Template literal: styled component에서는 props읽기 불가. `` 
• 태그드 템플릿 리터럴 Tagged template literal: 안에서 props를 읽어올 수 있다. div`{ props=>props.color ... }` / a`` / css``

 

 

예시)

1) 간단한 styled component

styled component에 props던져주고 읽기.

이 때, Tagged template literal을 사용한다. 

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

// Circle 이라는 컴포넌트를 만들건데, style된 div다. tagged template literal
const Circle = styled.div`
  width: 5rem;
  height: 5rem;
  background: ${props => props.color};
  border-radius: 50%;
  ${props =>
    props.huge && // props에 huge가 있을 경우 하단의 css 스타일을 불러옴. 
    css` // 내부의 props를 읽어오기 위해서 css로 tagged template literal 씀. 안쓰면 못읽어옴. 
      ${props=>props.불러오고싶은프롭}
      width: 10rem;
      height: 10rem;
    `};
`;

const StyledComponentExample = () => {
  return (
    <>
      <Circle color={"yellow"} />
      <Circle color={"blue"} huge />
    </>
  );
};

export default StyledComponentExample;

 

2) global style 지정

import React from "react";
import { createGlobalStyle } from "styled-components"; // 1
import TodoTemplate from "./components/TodoTemplate";
import TodoHead from "./components/TodoHead";
import TodoList from "./components/TodoList";
import TodoCreate from "./components/TodoCreate";

const GlobalStyle = createGlobalStyle` // 2
  body{
    background: #e9ecef;
  }
`;

function App() {
  return (
    <>
      <GlobalStyle /> // 3
      <TodoTemplate>
          <TodoHead/>
          <TodoList/>
          <TodoCreate/>
      </TodoTemplate>
    </>
  );
}

export default App;

 

 

* Literal template

sytled.div``;

문자열 안에 특정 자바스크립트 값을 넣는 방법. Expression interpolation(표현식 삽입법)

예시) Template literal

const name = 'react';
const message = `hello ${name}`;

console.log(message);
// "hello react"


const object = { a: 1 };
const text = `${object}`;

console.log(text);
// "[object Object]"

 

 

 

 

 

https://styled-components.com/

styled-components

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals

Template literals (Template strings)