React Native/TypeScript3 [React Native] Todo 앱 - Context & AsyncStorage_2편 들어가며. 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)} />} ).. 2022. 7. 20. [React Native] Todo 앱 - Context & AsyncStorage_1편 0. Context API & AsyncStorage? Context API React에서 Props와 State는 부모 컴포넌트와 자식 컴포넌트 또는 컴포넌트 안에서 데이터를 다루기 위해 사용된다. 즉, 부모 컴포넌트에서 자식 컴포넌트로, 위에서 아래로 한 방향으로만 데이터가 흐르게 된다. 하지만 Context API는 부모 컴포넌트에서 자식 컴포넌트로 전달되는 데이터의 흐름과는 상관없이, 전역으로 사용되는 데이터를 다룬다. 전역 데이터를 저장한 후, 컴포넌트에서 필요한 데이터를 불어와 사용한다. AsyncStorage React에서 Props와 State, Context는 모두 휘발성으로 데이터가 메모리에만 존재하며, 물리적으로 데이터를 저장하지는 않는다. AsyncStorage는 앱 내에서 키 값 .. 2022. 7. 19. [React Native] 카운터 앱 - Props & State 0. Props & State ? React Native는 React에서 파생되었기 때문에 대부분의 개념이 React와 동일하다. Props와 State 역시 리액트의 핵심 개념이다. Props 부모 컴포넌트로부터 자식 컴포넌트로 전달되는 데이터이다. 전달받은 데이터는 자식 컴포넌트에서 변경이 불가능하다. State 컴포넌트 안에서 유동적으로 데이터를 다룰 때 사용하며, 컴포넌트 안에서 데이터를 변경할 수 있다. 즉, State는 컴포넌트의 상태를 나타낸다. 1. 프로젝트 준비 react-native init Counter --template react-native-template-typescript React Native CLI를 사용해서 타입스크립트용 프로젝트를 생성하였다. npm install --.. 2022. 7. 18. 이전 1 다음 반응형
