22.10.14

벨로퍼트 리액트 3. Todo List 만들기 - 3-1. 컴포넌트 만들기

 

만들어질 컴포넌트의 구조

1. TodoTemplate : 투두리스트의 레이아웃 설정
2. TodoHead : 날짜, 요일, 할일 개수 보여줌
3. TodoList : 할일 정보가 들어있는 todos 배열을 map을 사용해 여러개의 TodoItem 컴포넌트를 렌더링해줌
4. TodoItem : 각 할일에 대한 정보 렌더링. 좌측 원을 누르면 완료 여부를 toggle 할수 있음. 완료시 좌측에 체크 나타나고 텍스트 연해짐. 마우스 오버시 휴지통 아이콘 나타나고 삭제 가능
5. TodoCreate : 새 할일 등록 컴포넌트. 클릭하면 입력 폼 나타남. 다시 클릭하면 폼이 사라짐

** styled-components에서 전역 스타일 추가할때 - createGlobalStyle

import React from 'react';
import { createGlobalStyle } from 'styled-components';

// 함수 사용시 컴포넌트가 생성됨
const GlobalStyle = createGlobalStyle`
  body {
    background: #e9ecef;
  }
`;

function App() {
  return (
    <>
			// 생성한 컴포넌트 호출해서 전역 스타일 사용
      <GlobalStyle />
      <div>안녕하세요</div>
    </>
  );
}

export default App;