웹 애플리케이션을 만들 때 어려운 것 중 하나가 상태관리이다. 이번에 Derived State ( 파생 상태 )라고 불리는 것에 대해서 공부할 계획이다. Derived State ? 파생 상태라는 것은 최소한의 데이터를 저장하게 끔 상태를 관리하는 방식이다. 즉, 상태를 최소화 한다는 것이다. 계산할 수 있는 상태에 대해서는 저장하지 않고 계산을 통해 변경 사항이 발생하면 동기화 하는 방식으로 관리한다. 실제 예 각 노래에 대해서 체크박스로 구성된 노래 선택기가 있다고 생각해보자. 이러한 노래는 장르별로 그룹화가 되어있다. 그 이유는 개별 노래를 선택할 수 있고 장르를 선택하면 모든 노래가 선택되길 희망한다. 이런 형식의 페이지를 우리가 개발하다보면 쉽게 접할 수 있다. 이것을 만들기 위해서 가장 첫번째..

React를 사용할 때 State로 Map을 사용하는 경우가 있다. 이때 어떤 방식으로 추가, 삭제, 등을 할 것인가? const [state, setState] = React.useState(new Map()); // 추가 const add = (key, value) => { setState((prev) => new Map([...prev, [key, value]])); }; // 없는 경우에만 추가 const upsert = (key, value) => { setState((prev) => new Map(prev).set(key, value)); } // 삭제 const delete = (key) => { setState((prev) => { const newState = new Map(prev); ..

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