JavaScript/React45 React) 리덕스 미들웨어를 통한 비동기 작업 관리 - 미들웨어란? 안녕하세요, 코린이의 코딩 학습기 채니 입니다. [리액트를 다루는 기술]의 책을 참고하여 포스팅한 개인 공부 내용입니다. 리덕스 미들웨어를 통한 비동기 작업 관리 리액트 웹 애플리케이션에서 API 서버를 연동할 때는 상태 관리를 잘 해줘야 합니다. 요청이 시작되었을 때는 로딩 중임을, 요청이 성공/실패했을 때는 로딩이 끝났음을 명시해주어야 합니다. 요청이 성공하면 서버에서 받아 온 응답에 대한 상태를 관리하고, 요청이 실패하면 서버에서 반환한 에러 상태를 관리합니다. 리덕스 사용 시 이 같은 비동기 작업을 관리해야 한다면, 미들웨어를 사용해 효율적으로 관리할 수 있습니다. 작업 환경 준비 CRA 사용해 리액트 프로젝트 생성 $ yarn create react-app learn-redux-middlewar.. 2022. 12. 19. React) 리덕스를 사용하여 리액트 애플리케이션 상태 관리하기 ④ - Hooks를 사용하여 컨테이너 컴포넌트 만들기 안녕하세요, 코린이의 코딩 학습기 채니 입니다. [리액트를 다루는 기술]의 책을 참고하여 포스팅한 개인 공부 내용입니다. 리덕스를 사용하여 리액트 애플리케이션 상태 관리하기 Hooks를 사용하여 컨테이너 컴포넌트 만들기 리덕스 스토어와 연동된 컨테이너 컴포넌트 생성 시, connect 대신 react-redux에서 제공하는 Hook을 이용할 수 있습니다. useSelector로 상태 조회하기 useSelector Hook은 connect 함수를 사용하지 않고도 리덕스의 상태를 조회할 수 있습니다. (connect 함수 - 컴포넌트를 리덕스와 연결시켜주는 역할) 예시 const 결과 = useSelector(상태 선택 함수); 상태 선택 함수는 mapStateToProps와 형태가 같습니다. Counter.. 2022. 12. 16. React) 리덕스를 사용하여 리액트 애플리케이션 상태 관리하기 ③ - 리덕스 더 편하게 사용하기 안녕하세요, 코린이의 코딩 학습기 채니 입니다. [리액트를 다루는 기술]의 책을 참고하여 포스팅한 개인 공부 내용입니다. 리덕스를 사용하여 리액트 애플리케이션 상태 관리하기 리덕스 더 편하게 사용하기 액션 생성 함수, 리듀서를 작성할 땐 redux-actions 라이브러리 / immer 라이브러리를 사용하여 편하게 사용 가능! redux-actions 액션 생성 함수를 더 짧은 코드로 작성 가능 리듀서 작성 시에도 switch/case 문이 아닌 handleActions 함수를 사용 $ yarn add redux-actions counter 모듈에 적용하기 modules/counter.js import { createAction } from 'redux-actions'; ... ... // 액션 생성 함.. 2022. 12. 16. React) 리덕스를 사용하여 리액트 애플리케이션 상태 관리하기 ② - 리액트 애플리케이션에 리덕스 적용하기 안녕하세요, 코린이의 코딩 학습기 채니 입니다. [리액트를 다루는 기술]의 책을 참고하여 포스팅한 개인 공부 내용입니다. 리덕스를 사용하여 리액트 애플리케이션 상태 관리하기 리액트 애플리케이션에 리덕스 적용하기 스토어를 생성하고 리액트 애플리케이션에 리덕스를 작용하는 작업은 src/index.js에서 이루어집니다. 스토어 만들기 src/index.js import React from 'react'; import ReactDOM from 'react-dom/client'; import './index.css'; import App from './App'; import { createStore } from 'redux'; import rootReducer from './modules'; const store.. 2022. 12. 15. React) 리덕스를 사용하여 리액트 애플리케이션 상태 관리하기 ① - 준비 과정 안녕하세요, 코린이의 코딩 학습기 채니 입니다. [리액트를 다루는 기술]의 책을 참고하여 포스팅한 개인 공부 내용입니다. 리덕스를 사용하여 리액트 애플리케이션 상태 관리하기 리액트에서 리덕스 사용 시, 상태 업데이트 관련 로직을 모듈로 분리하여 컴포넌트 파일과 별개로 관리할 수 있으므로 코드를 유지 보수하는 데 도움이 된다고 배웠습니다. 이외에도 여러 컴포넌트에서 동일한 상태를 공유할 때 유용하고, 실제 업데이트가 필요한 컴포넌트만 리렌더링되도록 최적화 해줄 수도 있습니다. 이전 포스팅에서는 store.dispatch와 store.subscribe를 사용했지만, 리액트에서 리덕스를 사용할 땐 react-redux 라이브러리에서 제공하는 connect와 Provider를 사용합니다. 작업 환경 설정 $ y.. 2022. 12. 9. React) 리덕스 라이브러리 이해하기 - 리덕스의 세 가지 규칙 안녕하세요, 코린이의 코딩 학습기 채니 입니다. [리액트를 다루는 기술]의 책을 참고하여 포스팅한 개인 공부 내용입니다. 리덕스 라이브러리 이해하기 리덕스의 세 가지 규칙 단일 스토어 하나의 애플리케이션 안에는 하나의 스토어가 들어 있습니다. 특정 업데이트가 너무 빈번히 일어나거나 애플리케이션의 특정 부분을 완전히 분리시킬 때 여러 개의 스토어를 만들 순 있지만, 상태 관리가 복잡해질 수 있기 때문에 권장하지 않습니다. 읽기 전용 상태 상태를 업데이트할 때 기존의 객체는 건드리지 않고 새로운 객체를 생성해 줘야 합니다. 데이터가 변경되는 것을 감지하기 위해 얕은 비교 검사를 하기 때문! 리듀서는 순수한 함수 리듀서 함수는 이전 상태와 액션 객체를 파라미터로 받음 파라미터 외의 값에는 의존하면 안됨 이전 .. 2022. 11. 29. 이전 1 2 3 4 ··· 8 다음
