[React] Todo-list : 컴포넌트 만들기 2

📌 Tagged Template Literal

styled-components에서는 Tagged Template Literal 문법을 사용하여 컴포넌트의 props을 읽어올 수 있다.

const Text = styled.div`
  flex: 1;
  font-size: 21px;
  color: #495057;
  ${props =>
    props.done &&
    css`
      color: #ced4da;
    `}
`;


function App() {
  return <Text done={done}>{text}</Text>;
}

여러 줄의 CSS 코드를 조건부로 보여주고 싶다면 css를 불러와서 사용해야 그 스타일 내부에서도 다른 props를 조회할 수 있다.

📌 단축 평가(short-circuit evaluation) 논리 계산법

<CheckCircle done={done}>{done && <MdDone />}</CheckCircle>

A && B
A가 truthy일 때, 결과는 B
A가 falsy일 때, 결과는 A