일반적으로 전역 상태 관리를 위해서는 Redux와 같은 전역 상태 관리 라이브러리를 사용한다. 이때 Context API를 왜 사용하지 말라는 부분을 정리된 글을 많이 봤다. 하지만 이것을 직접 테스트하지 않았기 때문에 이번에 비교를 해보려고 한다. ( 머리로만 이해하는 것과 눈과 손을 함께 사용하는 것 중 후자가 더 좋을 테니 ㅎㅎ ) 작업 Redux 사용하는 패키지는 react-redux, @reduxjs/toolkit 간단한 테스트를 하기 때문에 기본적인 패키지만 사용했다. // /reducer/counter.js import { createSlice } from "@reduxjs/toolkit"; const initialState = { value: 0, }; const counterSlice =..

들어가며. 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)} />} )..

0. Context API & AsyncStorage? Context API React에서 Props와 State는 부모 컴포넌트와 자식 컴포넌트 또는 컴포넌트 안에서 데이터를 다루기 위해 사용된다. 즉, 부모 컴포넌트에서 자식 컴포넌트로, 위에서 아래로 한 방향으로만 데이터가 흐르게 된다. 하지만 Context API는 부모 컴포넌트에서 자식 컴포넌트로 전달되는 데이터의 흐름과는 상관없이, 전역으로 사용되는 데이터를 다룬다. 전역 데이터를 저장한 후, 컴포넌트에서 필요한 데이터를 불어와 사용한다. AsyncStorage React에서 Props와 State, Context는 모두 휘발성으로 데이터가 메모리에만 존재하며, 물리적으로 데이터를 저장하지는 않는다. AsyncStorage는 앱 내에서 키 값 ..