기존 Redux에서는 middleware를 사용하여 비동기 처리를 해야 했다. 안 그래도 복잡한 코드가 더 복잡해져 유지보수가 까다로워진다. Redux Toolkit은 간결한 코드로 비동기 처리를 쉽게 할 수 있다. Redux와 Redux toolkit 비동기 처리 비교 구분 Redux Redux Toolkit 비동기 처리 도구 Middleware - Redux Thunk - Redux Saga createAsyncThunk 액션 타입 정의 수동으로 정의해야 함 자동으로 생성됨 코드 구문 Boilerplate 코드가 많음 Redux보다 간결함 설치 및 설정 별도의 미들웨어 설치 및 설정이 필요 Redux Toolkit 패키지만 설치하면 따로 설치할 필요 없음 액션 생성 액션 생성자에서 직접 디스패치 cr..
리액트 미들웨어는 애플리케이션의 액션과 스토어 상태 간의 중간 단계로서 동작하는 소프트웨어다. 주로 Redux와 함께 사용되며, 액션을 처리하거나 상태를 변화시키기 전에 추가적인 작업을 수행할 수 있다. 미들웨어 정리표 미들웨어 설명 redux-thunk 비동기 작업을 처리하고 액션 생성자에서 함수를 반환할 수 있게 해준다. 주로 비동기 작업을 다룰 때 사용된다. redux-saga 제너레이터 함수를 이용하여 복잡한 비동기 작업을 처리하는 미들웨어 redux-logger 개발환경에서 스토어의 액션과 상태를 콘솔에 로깅하여 디버깅을 도와주는 미들웨어 redux-persist 스토어의 상태를 지속적으로 유지하고, 로컬 스토리지 또는 다른 저장소에 상태를 저장할 수 있게 해준다. redux-throttle 특..
리액트의 상태 관리 방법에는 여러 가지가 있다. 효과적인 상태 관리는 매우 중요하다. 상태 관리의 핵심은 어떻게 애플리케이션의 데이터를 구조화하고 관리하는가에 달려있다. 크게는 로컬 상태 관리와 전역 상태 관리를 기준으로 나눌 수 있다. 리액트 상태 관리 방법 정리표 관리 방법 로컬/전역 주요 특징 주요 사용 시점 useState Hook 로컬 - 함수형 컴포넌트에서 상태를 관리하는 데 사용됨 작은 규모의 컴포넌트 또는 컴포넌트 간 통신에 적합 useReducer Hook 로컬 - 복잡한 상태 로직을 다룰 때, 이전 상태와 액션을 활용하여 상태를 업데이트 - 컴포넌트 로직을 분리하고 예측 가능한 상태 관리 가능 복잡한 상태 로직이나 컴포넌트 간 통신이 많은 경우 Context API 전역 - 컴포넌트 트..
useReducer는 React의 훅 중 하나로, useState처럼 state를 생성하고 관리할 수 있게 해주는 도구이다. useReducer는 여러 개의 하위 값을 포함하는 복잡한 state를 다뤄야 할 때 사용한다. useState와 비교하며 useReducer를 왜 사용하는지부터 우선 알아보자. useState VS. useReducer useState는 간단한 상태 관리에 주로 사용된다. 하지만 상태가 복잡하고 여러 개의 하위 값이 포함된 경우, 상태를 업데이트하는 로직이 복잡해질 수 있다. 이때, useReducer를 사용하면 복잡한 상태 로직을 더 효율적으로 다룰 수 있다. 복잡한 상태란, 여러 하위 값을 포함하거나 여러 상태 간의 관계가 복잡한 경우를 의미한다. 예를 들어, 사용자의 프로필..
React에서 컴포넌트 간의 효율적인 상태 관리는 중요한 요소 중 하나다. 특히 자식 컴포넌트에서 부모 컴포넌트의 상태를 업데이트하는 상황이 종종 있다. 자식 컴포넌트에서 부모 컴포넌트의 상태를 업데이트 여러 가지 방법이 있는데, 이러한 다양한 방법은 각각의 상황에 맞게 선택되어야 한다. 각 방법의 장단점과 코드 예시를 함께 알아보면서 효율적인 상태 관리를 구현하는 방법을 이해하도록 해보자. 1. 콜백 함수를 활용한 상태 업데이트 React의 기본 원칙 중 하나는 단방향 데이터 흐름이다. 부모 컴포넌트는 자식 컴포넌트에게 콜백 함수를 전달하고, 자식 컴포넌트에서 해당 콜백을 호출하여 부모 컴포넌트의 상태를 간접적으로 업데이트할 수 있다. 이는 단방향 데이터 프름을 유지하면서 부모 컴포넌트와 자식 컴포넌트..
[React] react-ga로 리액트와 구글 애널리틱스 연결하기
리액트 프로젝트를 구글 애널리틱스와 연동하여 방문자 추적 등 여러 데이터를 수집하고 활용해보자. 목차 웹사이트 분석이 필요한 이유 리액트와 구글 애널리틱스 연결하기 웹사이트 분석이 필요한 이유 방문자가 사는 지역에 대한 정보를 얻을 수 있다. 내 비즈니스에 더 관심이 있는 연령대를 이해할 수 있다. 방문자가 평균적으로 얼마나 많은 시간 동안 머무르는지 알 수 있다. 신규 사용자를 추적할 수 있다. 애플리케이션에 버그가 있는지 추적할 수 있다. 사용자의 관심에 따라 최적화 할 수 있다. 리액트와 구글 애널리틱스 연결하기 1. 계정 & 속성 생성 1-1. 구글 애널리틱스 페이지에서 계정을 생성한다. 1-2. 홈-관리로 들어가서 속성 만들기를 클릭한다. 1-3. 속성 이름, 보고 시간대, 통화를 설정하고 '고..
리액트 설치부터 Client, Server 초기 세팅까지 과정에 대해 알아보자. React 설치와 Client + Server 세팅 프로젝트 폴더 생성 터미널에서 프로젝트 폴더 경로로 이동한다. cd my-app/ 리액트 프로젝트 개발 환경을 구축하기 위해 아래 명령어를 입력한다. npx create-react-app client 타입스크립트 버전 npx create-react-app --template typescript my-app 아래에 client 폴더가 생성되면서, 그 안에 리액트 패키지가 설치되었다. 프로젝트 폴더에 server 폴더를 생성한다. mkdir server 현재까지 폴더 구조 my-app ├── client │ ├── README.md │ ├── package-lock.json │..