[D-4] 컴포넌트 스타일링

템플릿 컴포넌트

 

src/components/

TodoTemplate.js

 

import React from 'react';
import './TodoTemplate.scss';

const TodoTemplate = ({ children }) => {
  return (
    <div className="TodoTemplate">
      <div className="app-title">일정 관리</div>
      <div className="content">{children}</div>
    </div>
  );
};

export default TodoTemplate;

---

앱 메인

src/

App.js

import React from 'react';
import TodoTemplate from './components/TodoTemplate';

const App = () => {
  return <TodoTemplate>Todo App을 만들자! </TodoTemplate>;
};

export default App;

---

 

추가 기능 구현

1. 새 항목 입력 및 추가 컴포넌트
2. state 를 통한 인풋상태 관리

 

src/components/
TodoInsert.js

import React from 'react';
import {MdAdd} from 'react-icons/md';
import './TodoInsert.scss';

const TodoInsert = () => {
  return (
    <form className="TodoInsert">
      <input placeholder="할 일을 입력하세요." />
      <button type="submit">
        <MdAdd />
      </button>
    </form>

  );
};

export default TodoInsert;

---

항목 리스트 아이템 컴포넌트

1. 각각의 할 일 항목에 대한 정보 표시 컴포넌트 
2. todo 객체를 props로 받아와서 상태에 따라 다른 스타일의 UI 표시 

 

src/components/

TodoListItem.js

import React from 'react';
import {
  MdCheckBoxOutlineBlank,
  MdCheckBox,
  MdRemoveCircleOutline,
} from 'react-icons/md';
import './TodoListItem.scss';

const TodoListItem = () => {
  return (
    <div className="TodoListItem">
      <div className="checkbox">
        <MdCheckBoxOutlineBlank />
        <div className="text">할 일</div>
      </div>
      <div className="remove">
        <MdRemoveCircleOutline />
      </div>
    </div>
  );
};

export default TodoListItem;

---

항목 리스트 컴포넌트

1. todos 배열을 props로 받아서, 배열내장함수 map 사용해서  
    여러 개의 TodoListItem 컴포넌트로 변환해서 표시

 

src/components/

TodoList.js

import React from 'react';
import TodoListItem from './TodoListItem';
import './TodoList.scss';

const TodoList = () => {
  return (
    <div className="TodoList">
      <TodoListItem />
      <TodoListItem />
      <TodoListItem />
    </div>
  );
};

export default TodoList;

---

앱 메인

src/

App.js

import React from 'react';
import TodoTemplate from './components/TodoTemplate';
import TodoInsert from './components/TodoInsert';
import TodoList from './components/TodoList';

const App = () => {
  return 
        <TodoTemplate>
          <TodoInsert />
          <Todolist />
        </TodoTemplate>;
};

export default App;

 

---

일정관리 앱 기본 컴포넌트 스타일링