기존 Redux에서는 middleware를 사용하여 비동기 처리를 해야 했다. 안 그래도 복잡한 코드가 더 복잡해져 유지보수가 까다로워진다. Redux Toolkit은 간결한 코드로 비동기 처리를 쉽게 할 수 있다. Redux와 Redux toolkit 비동기 처리 비교 구분 Redux Redux Toolkit 비동기 처리 도구 Middleware - Redux Thunk - Redux Saga createAsyncThunk 액션 타입 정의 수동으로 정의해야 함 자동으로 생성됨 코드 구문 Boilerplate 코드가 많음 Redux보다 간결함 설치 및 설정 별도의 미들웨어 설치 및 설정이 필요 Redux Toolkit 패키지만 설치하면 따로 설치할 필요 없음 액션 생성 액션 생성자에서 직접 디스패치 cr..
Redux toolkit은 Redux를 효율적으로 사용하기 위한 공식 라이브러리다. Redux를 사용하던 개발자들이 보다 쉽게 코드를 작성하고 유지보수할 수 있도록 해준다. Redux toolkit을 통해 Redux의 코드 복잡성을 줄이고, 보일러플레이트 코드(반복적인 코드)를 최소화하며, 개발자 경험을 향상할 수 있다. 왜 Redux Toolkit을 사용해야 하는가? 1. 간결한 코드 createSlice와 configureStore와 같은 간편한 함수들을 제공하여 보일러플레이트 코드를 최소화한다. 2. 불변성 유지 createSlice는 내부적으로 Immer 라이브러리를 사용한다. Immer 라이브러리는 기존 객체를 직접적으로 수정해도 불변성을 유지될 수 있도록 해준다. Immer는 이전 상태를 변경..
리액트 미들웨어는 애플리케이션의 액션과 스토어 상태 간의 중간 단계로서 동작하는 소프트웨어다. 주로 Redux와 함께 사용되며, 액션을 처리하거나 상태를 변화시키기 전에 추가적인 작업을 수행할 수 있다. 미들웨어 정리표 미들웨어 설명 redux-thunk 비동기 작업을 처리하고 액션 생성자에서 함수를 반환할 수 있게 해준다. 주로 비동기 작업을 다룰 때 사용된다. redux-saga 제너레이터 함수를 이용하여 복잡한 비동기 작업을 처리하는 미들웨어 redux-logger 개발환경에서 스토어의 액션과 상태를 콘솔에 로깅하여 디버깅을 도와주는 미들웨어 redux-persist 스토어의 상태를 지속적으로 유지하고, 로컬 스토리지 또는 다른 저장소에 상태를 저장할 수 있게 해준다. redux-throttle 특..
Redux Thunk는 미들웨어 중 하나로, 비동기 작업을 처리하고 액션을 디스패치할 수 있게 도와주는 라이브러리다. 리덕스는 동기적인 작업에 특화되어 있어서, 비동기 작업을 처리하기 위해서는 Thunk와 같은 미들웨어가 필요하다. 그 외에도 비동기 작업을 처리하는 미들웨어로 Redux Saga, Redux Observable 등이 있다. 동기적 액션 생성자와 Thunk를 사용한 비동기 액션 생성자 비교 동기적 액션 생성자 액션 함수는 단순히 액션 ‘객체’를 반환 반환 형식: { type: '액션_타입', payload: '데이터' } 동기적인 액션을 생성하는 역할 Thunk를 사용한 비동기 액션 생성자 비동기 액션 함수는 ‘함수’를 반환 비동기 액션 함수는 dispatch를 인자로 받음 이를 통해 함수..
Redux는 JavaScript 애플리케이션의 상태 관리 라이브러리이다. React에서 Redux를 사용하는 주된 이유는 상태 관리의 효율성과 예측 가능성을 높이기 위함이다. React 차체에서도 컴포넌트 state를 통한 상태 관리가 가능하지만, 복잡한 상태 관리가 필요한 대규모 애플리케이션에서는 Redux와 같은 전역 상태 관리 방식을 도입한다. Redux 사용 이유 중앙 집중식 상태 관리와 단일 출처 Redux는 상태를 하나의 스토어에 저장한다. 때문에 한 곳에서 모든 상태 관리가 이루어진다. 이는 데이터가 어디서 오는지 명확하게 파악할 수 있게 하며, 데이터의 일관성을 유지할 수 있다. 예측 가능성 Redux는 상태의 변화를 예측 가능한 방식으로 다룬다. 상태는 불변성을 유지하면서 액션에 의해 변..
useReducer는 React의 훅 중 하나로, useState처럼 state를 생성하고 관리할 수 있게 해주는 도구이다. useReducer는 여러 개의 하위 값을 포함하는 복잡한 state를 다뤄야 할 때 사용한다. useState와 비교하며 useReducer를 왜 사용하는지부터 우선 알아보자. useState VS. useReducer useState는 간단한 상태 관리에 주로 사용된다. 하지만 상태가 복잡하고 여러 개의 하위 값이 포함된 경우, 상태를 업데이트하는 로직이 복잡해질 수 있다. 이때, useReducer를 사용하면 복잡한 상태 로직을 더 효율적으로 다룰 수 있다. 복잡한 상태란, 여러 하위 값을 포함하거나 여러 상태 간의 관계가 복잡한 경우를 의미한다. 예를 들어, 사용자의 프로필..
리액트에서 onClick은 이벤트 핸들러 중 하나로서, 마우스 클릭 이벤트에 응답하여 실행되는 콜백 함수이다. 보통 버튼이나 링크와 같은 요소에 onClick 이벤트 핸들러를 등록하여 해당 요소를 클릭했을 때 원하는 동작을 수행할 수 있다. onClick 이벤트 핸들러에 함수를 전달하는 방법 함수 이름을 전달 (함수 자체를 전달) onClick prop에 함수 이름만을 전달 예시: 클릭 클릭 이벤트가 발생하면 handleClick 함수가 실행됨 익명 함수를 사용하여 전달 onClick prop에 익명 함수를 전달 예시: { console.log('클릭되었습니다.'); }}>클릭 클릭 이벤트가 발생하면 익명 함수가 실행되며, 원하는 동작을 수행 함수 호출 결과를 전달 함수 호출 결과를 onClick pro..
[React] react-ga로 리액트와 구글 애널리틱스 연결하기
리액트 프로젝트를 구글 애널리틱스와 연동하여 방문자 추적 등 여러 데이터를 수집하고 활용해보자. 목차 웹사이트 분석이 필요한 이유 리액트와 구글 애널리틱스 연결하기 웹사이트 분석이 필요한 이유 방문자가 사는 지역에 대한 정보를 얻을 수 있다. 내 비즈니스에 더 관심이 있는 연령대를 이해할 수 있다. 방문자가 평균적으로 얼마나 많은 시간 동안 머무르는지 알 수 있다. 신규 사용자를 추적할 수 있다. 애플리케이션에 버그가 있는지 추적할 수 있다. 사용자의 관심에 따라 최적화 할 수 있다. 리액트와 구글 애널리틱스 연결하기 1. 계정 & 속성 생성 1-1. 구글 애널리틱스 페이지에서 계정을 생성한다. 1-2. 홈-관리로 들어가서 속성 만들기를 클릭한다. 1-3. 속성 이름, 보고 시간대, 통화를 설정하고 '고..
createapp으로 웹 프로젝트 초기 세팅 (Setup) 쉽게 하기
웹 프로젝트를 시작할 때 폴더와 파일 구성, 설치할 라이브러리, config 설정 등 초기 세팅에 머리 싸맨 적 많을 것이다. 만들어 둔 Boilerplate도 없다면 Create App을 이용해보자. Create App 사용하기 1. Create App 홈페이지에 들어간다. 2. 프로젝트에 적용할 라이브러리나 번들러, 언어 등을 선택한다. 3. 프로젝트명을 입력 후, Download project를 클릭해 다운로드한다. 4. 프로젝트 폴더가 생성되면, READ.md 파일을 열어 가이드대로 초기 세팅을 해주면 끝이다.