반응형 개념공부/React.js3 [Redux-middleware 리덕스 미들웨어 中] Redux-Saga란? Redux-middleware 1. 리액트 미들웨어란 무엇인가? - 기존의 리덕스는 액션이 발생하게 되면, 디스패치를 통해 스토어에게 상태 변화의 필요성을 알리게 된다. 우리가 알고있는 리덕스는 동기적인 흐름을 통해 아래와 같이 동작한다. 액션 객체 생성 -> 디스패치로 액션을 발생시킴 -> 리듀서는 정해진 로직에 의해 처리한 뒤 새로운 상태 값 반환 하지만, 동기적인 흐름만으로는 처리하기 힘든 작업들이 있다. 예를들어, 시간을 딜레이시켜 동작하게 한다던지, 외부 데이터를 요청하여 그에 따른 응답 화면을 보여주어야 한다면? 리덕스에서 이러한 비동기 작업을 처리하기 위해 사용하는 것이 리덕스 미들웨어 이다. 2. 리덕스 미들웨어의 종류 리덕스 미들웨어를 직접 만들어서 처리할 수도 있지만, 흔히 이미 만들어.. 2022. 3. 6. React 공부한 내용 정리 [React란, 특징, 함수형컴포넌트, Hook] React란? facebook이 개발한 프론트엔드 라이브러리로, "컴포넌트" 라는 개념에 집중이 되어있다. SPA나 모바일 앱 개발 시 토대로 사용될 수 있음. 특징 Data Flow Component 기반 구조 Virtual Dom Props and State JSX 1. Data Flow React는 데이터의 흐름이 한 방향으로만 흐르는 단방향 데이터 흐름을 가진다. Angular.js와 같은 양방향 데이터 바인딩은 규모가 커질수록 데이터의 흐름을 추적하기가 힘들지만, 단방향 흐름은 데이터 흐름에서 일어나는 변화를 보다 예측 가능할 수 있도록 해준다. 2. Component 기반 구조 Component : 독립적인 단위의 소프트웨어 모듈 / 소프트웨어를 독립적인 하나의 부품으로 만드는 방법 React.. 2022. 3. 2. Redux (리덕스)의 개념 리덕스를 쓰면 좋은 이유 - 중앙 집중적인 데이터 스토어를 이용하여 관리한다. state는 읽기전용이다. - 리액트에서 state 를 업데이트 해야 할 때, setState 를 사용하고, 배열을 업데이트 해야 할 때는 배열 자체에 push 를 직접 하지 않고, concat 같은 함수를 사용하여 기존의 배열은 수정하지 않고 새로운 배열을 만들어서 교체하는 방식으로 업데이트를 한다. - 리덕스에서도 마찬가지로 기존의 상태는 건들이지 않고, 새로운 상태를 생성하여 업데이트 해주는 방식으로 해준다. 리덕스에서 불변성을 유지해야 하는 이유는 내부적으로 데이터가 변경 되는 것을 감지하기 위하여 shallow equality 검사를 하기 때문이다. 리듀서는 순수한 함수 순수한 함수, 라는 개념이 익숙하지 않으시죠. .. 2022. 1. 28. 이전 1 다음
