web study

Redux는 자바스크립트 기반의 상태 관리 라이브러리다. 주로 React와 사용되지만 순수 자바스크립트, Angular, Vue에서도 사용 가능하다. Redux는 상태를 예측할 수 있으며, 상태의 변경이 적은 방식에 중점을 두고 있다. 이러한 특징은 단일 페이지 애플리케이션(SPAs) 또는 자바스크립트 프레임워크 및 라이브러리와 잘 맞는다. React 예제: https://fromnowwon.tistory.com/entry/react-redux Redux 설치와 코드 예제 github: https://github.com/fromnowwon/redux-vanilla-cafe-order-syatem 설치 npm install redux 코드 예제 store.js: 스토어 (주문목록 저장소) actions.j..

리액트의 상태 관리 방법에는 여러 가지가 있다. 효과적인 상태 관리는 매우 중요하다. 상태 관리의 핵심은 어떻게 애플리케이션의 데이터를 구조화하고 관리하는가에 달려있다. 크게는 로컬 상태 관리와 전역 상태 관리를 기준으로 나눌 수 있다. 리액트 상태 관리 방법 정리표 관리 방법 로컬/전역 주요 특징 주요 사용 시점 useState Hook 로컬 - 함수형 컴포넌트에서 상태를 관리하는 데 사용됨 작은 규모의 컴포넌트 또는 컴포넌트 간 통신에 적합 useReducer Hook 로컬 - 복잡한 상태 로직을 다룰 때, 이전 상태와 액션을 활용하여 상태를 업데이트 - 컴포넌트 로직을 분리하고 예측 가능한 상태 관리 가능 복잡한 상태 로직이나 컴포넌트 간 통신이 많은 경우 Context API 전역 - 컴포넌트 트..

useReducer는 React의 훅 중 하나로, useState처럼 state를 생성하고 관리할 수 있게 해주는 도구이다. useReducer는 여러 개의 하위 값을 포함하는 복잡한 state를 다뤄야 할 때 사용한다. useState와 비교하며 useReducer를 왜 사용하는지부터 우선 알아보자. useState VS. useReducer useState는 간단한 상태 관리에 주로 사용된다. 하지만 상태가 복잡하고 여러 개의 하위 값이 포함된 경우, 상태를 업데이트하는 로직이 복잡해질 수 있다. 이때, useReducer를 사용하면 복잡한 상태 로직을 더 효율적으로 다룰 수 있다. 복잡한 상태란, 여러 하위 값을 포함하거나 여러 상태 간의 관계가 복잡한 경우를 의미한다. 예를 들어, 사용자의 프로필..