[React Native] Todo 앱 - Context & AsyncStorage_2편
·
React Native/TypeScript
들어가며. Todo 앱 - Context & AsyncStorage_1편과 이어지는 내용입니다. 앞선 부분을 보지 않으셨다면 확인하시는 것을 추천드립니다. 4. 개발 10. AddTodo 컴포넌트 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)} />} )..
[React Native] Todo 앱 - Context & AsyncStorage_1편
·
React Native/TypeScript
0. Context API & AsyncStorage? Context API React에서 Props와 State는 부모 컴포넌트와 자식 컴포넌트 또는 컴포넌트 안에서 데이터를 다루기 위해 사용된다. 즉, 부모 컴포넌트에서 자식 컴포넌트로, 위에서 아래로 한 방향으로만 데이터가 흐르게 된다. 하지만 Context API는 부모 컴포넌트에서 자식 컴포넌트로 전달되는 데이터의 흐름과는 상관없이, 전역으로 사용되는 데이터를 다룬다. 전역 데이터를 저장한 후, 컴포넌트에서 필요한 데이터를 불어와 사용한다. AsyncStorage React에서 Props와 State, Context는 모두 휘발성으로 데이터가 메모리에만 존재하며, 물리적으로 데이터를 저장하지는 않는다. AsyncStorage는 앱 내에서 키 값 ..