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..

컨테이너 구성 : 타이틀 컨테이너, 카운터 컨테이너, 버튼 컨테이너 기능 + 버튼을 누르면, 숫자 증가 - 버튼을 누르면, 숫자 감소 버튼 컴포넌트 1) 아이콘 다운로드 링크 https://material.io/tools/icons/?style=baseline Resources Build beautiful, usable products faster. Material Design is an adaptable system—backed by open-source code—that helps teams build high quality digital experiences. material.io 2) 이미지 다운로드 add_circle (+) remove_circle (-) (*) 클릭해서 18dp라고 표시된 부..

웹스톰, VSCode 둘중 하나를 선택해서 환경구성 웹스톰 웹 스톰 터미널 npm install --save styled-components npm install --save-dev typescript @types/react @types/react-native @types/styled-components babel-plugin-root-import Counter > tsconfig.json 생성 더보기 { "compilerOptions": { "allowJs": true, "allowSyntheticDefaultImports": true, "esModuleInterop": true, "isolatedModules": true, "jsx": "react", "lib": ["es6"], "moduleReso..

설치 에디터는 둘중 하나를 선택하면 된다. 1. 웹스톰 (유료) 2. VSCode (무료) (*) 기본적으로 VSCode 추천한다. 하단 부분의 VSCode 설치/설정법 있으니 참조 에디터 설치 (WebStorm) https://www.jetbrains.com/ko-kr/webstorm/ WebStorm: The Smartest JavaScript IDE by JetBrains A powerful IDE for modern JavaScript development with code completion and refactoring for JavaScript, TypeScript, and the most popular web frameworks. www.jetbrains.com 직접 단말기 연결 PC 와 단..