11) AddTodo 컴포넌트 src/Screens/Todo/AddTodo/ index.tsx 더보기 import React, { useState } from 'react'; import AddButton from './AddButton'; import TodoInput from './TodoInput'; interface Props {} const AddTodo = ({ }: Props) => { const [showInput, setShowInput] = useState(false); return ( setShowInput(true)} /> {showInput && setShowInput(false)} />} ); }; export default AddTodo; 12) AddButton 컴포넌트 sr..

6. TodoListView 컴포넌트 src/Screens/Todo/TodoListView/ index.tsx 더보기 import React from 'react'; import Styled from 'styled-components/native'; import Header from './Header'; import TodoList from './TodoList'; const Container = Styled.SafeAreaView` flex: 1; `; interface Props {} const TodoListView = ({ }: Props) => { return ( ); }; export default TodoListView; 7) Header 컴포넌트 src/Screens/Todo/TodoLis..

하단의 + 버튼을 클릭하면, 입력 창 다이얼로그 띄우면서 뒷배경은 불투명도로 조정 - (-) 버튼을 클릭하면 삭제됨 - 앱이 종료되어도 데이터가 사라지지 않음 (데이터 유지) 1. 전역 데이터 저장할 Context 생성 src/Context/TodoListContext/@types/ index.d.ts 더보기 interface ITodoListContext { todoList: Array; addTodoList: (todo: string) => void; removeTodoList: (index: number) => void; } 2. 컨텍스트 정의 src/Context/TodoListContext/ index.tsx 더보기 import React, { createContext, useState, use..

1. 리액트 네이티브 CLI 명령어를 사용하여 할 일 리스트 프로젝트를 생성 react-native init TodoList 2. 개발을 좀 더 편리하게 하기 위해 타입스크립트, Styled Components, babel-pluginroot-import를 다음 명령어로 설치 cd TodoList npm install --save styled-components npm install --save-dev typescript @types/react @types/react-native @types/styled-components babel-plugin-root-import 3. IDE 를 실행하여 프로젝트 오픈하여 타입스크립트 생성 및 설정 : tsconfig.json 더보기 { "compilerOptions..