Project D (ToDoList)(8)
-
[D-8] 항목 수정기능 구현하기
src/ App.js 더보기 import React, { useState, useRef, useCallback } from 'react'; import TodoInsert from './components/TodoInsert'; import TodoList from './components/TodoList'; import TodoTemplate from './components/TodoTemplate'; const App = () => { const [todos, setTodos] = useState([ { id: 1, text: '리액트 기초', checked: true, }, { id: 2, text: '컴포넌트 스타일링', checked: true, }, { id: 3, text: '일정 관리 앱 ..
2020.01.25 -
[D-7] 항목 삭제기능 구현하기
src/ App.js 더보기 import React, { useState, useRef, useCallback } from 'react'; import TodoInsert from './components/TodoInsert'; import TodoList from './components/TodoList'; import TodoTemplate from './components/TodoTemplate'; const App = () => { const [todos, setTodos] = useState([ { id: 1, text: '리액트 기초', checked: true, }, { id: 2, text: '컴포넌트 스타일링', checked: true, }, { id: 3, text: '일정 관리 앱 ..
2020.01.25 -
[D-6] 항목 추가기능 구현하기
src/components TodoInsert.js 더보기 import React, { useState, useCallback } from 'react'; import { MdAdd } from 'react-icons/md'; import './TodoInsert.scss'; const TodoInsert = ({ onInsert }) => { const [value, setValue] = useState(''); const onChange = useCallback(e => { setValue(e.target.value); }, []); const onSubmit = useCallback( e => { onInsert(value); setValue(''); e.preventDefault(); //새로고침..
2020.01.25 -
[D-5] 기본 기능 구현하기
src/ App.js 더보기 import React, { useState } from 'react'; import TodoInsert from './components/TodoInsert'; import TodoList from './components/TodoList'; import TodoTemplate from './components/TodoTemplate'; const App = () => { const [todos, setTodos] = useState([ { id: 1, text: '리액트 기초', checked: true, }, { id: 2, text: '컴포넌트 스타일링', checked: true, }, { id: 3, text: '일정 관리 앱 제작', checked: false, ..
2020.01.25 -
[D-4] 컴포넌트 스타일링
템플릿 컴포넌트 src/components/ TodoTemplate.js 더보기 import React from 'react'; import './TodoTemplate.scss'; const TodoTemplate = ({ children }) => { return ( 일정 관리 {children} ); }; export default TodoTemplate; 앱 메인 src/ App.js 더보기 import React from 'react'; import TodoTemplate from './components/TodoTemplate'; const App = () => { return Todo App을 만들자! ; }; export default App; 추가 기능 구현 1. 새 항목 입력 및 추가 ..
2020.01.24 -
[D-3] 컴포넌트 UI 구성
총 4개의 컴포넌트 구성 (src/components) TodoTemplate 1. 화면을 가운데 정렬, 앱 타이틀(일정관리) 표시 src/componenets TodoTemplate.scss 더보기 .TodoTemplate { width: 512px; margin-left: auto; margin-right: auto; margin-top: 6rem; border-radius: 4px; overflow: hidden; .app-title { background: #22b8cf; color: white; height: 4rem; font-size: 1.5rem; display: flex; align-items: center; justify-content: center; } .content { backgr..
2020.01.24