React

redux-saga redux-thunk 다음으로 많이 사용하는 비동기 작업 관련 미들웨어이다. 사용하기 좋은 상황 기존 요청을 취소 처리해야 할때 ( 불필요한 중복 요청 방지 ) 특정 액션이 발생했을 때 다른 액션을 발생시키거나, API 요청 등 리덕스와 관계없는 코드를 실행했을 때 웹소켓을 사용할 때 API 요청 실패 시 재요청해야 할 때 제너레이터 함수 redux-saga 에서는 ES6의 제너레이터 함수를 사용한다. (처음 다뤄봐서 이해하기 힘들었다....) 제너레이터 함수를 사용하면 함수에 값을 순차적으로 반환할 수 있다. 또한 함수의 흐름을 도중에 멈춰 눻았다가 이어 진행할 수 있다. function* generatorFunction() { console.log(`11`); yield 1; co..

redux-thunk redux-thunk는 리덕스를 사용하는 프로젝트에서 비동기 작업을 처리할 때 가장 기본적으로 사용하는 라이브러리이다. Thunk란? 특정 잡업을 나중에 할 수 있도록 미루기 위해 함수 형태로 감싼 것을 의미한다. const addOne = x => x + 1; const addOneThunk = x => () => addOne(); const fn = addOneThunk(1); setTimeout(() => { const value = fn(); // fn이 실행되는 시점에 연산 console.log(value); }, 1000); redux-thunk 라이브러리를 사용하면 thunk 함수를 만들어서 디스패치할 수 있다. 리덕스 미들웨어가 그 함수를 전달받아 store의 disp..

미들웨어란? 액션 디스패치를 했을 때 리듀서에 이를 처리하기 앞서 사전에 지정된 작업을 실행한다. 미들웨어는 액션과 리듀서 사이의 중간자라 생각하면 쉽다. 미들웨어의 용도 특정 조건에 따라 액션을 무시 특정 조건에 따라 액션 정보를 가로채 변경한 후 리듀서에 전달 특정 액션에 기반하여 새로운 액션을 여러번 디스패치 전달받은 액션을 콘솔에 기록 전달받은 액션 정보를 기반으로 액션을 취소 다른 종류의 액션을 추가로 디스패치 미들웨어의 기본 구조 const loggerMiddleWare = store => next => action{ // 미들웨어 기본 구조 }; export default loggerMiddleWare; store는 리덕스 스토어 인스턴스를 가르키고, action은 디스패치된 액션을 가르킨다..

1. 작업 환경 사용한 라이브러리 redux ( npm add react-redux ) immer ( npm add immer ) 2. Presentational Component 프레젠테이셔널 컴포넌트 : 주로 props를 받아와 사용자에게 받아온 정보를 보여주는 컴포넌트 1) 카운터 Counter.js const Counter = ({ number, onIncrease, onDecrease }) => { return ( {number} +1 -1 ); }; export default Counter; 2) Todos.js const TodoItem = ({ todo, onToggle, onRemove }) => { return ( onToggle(todo.id)} checked={todo.done} r..

리덕스의 장점 컴포넌트의 상태 업데이트 관련 로직을 다른 파일로 분리시켜 효율적으로 관리한다. 컴포넌트 끼리 상태 공유시 손쉽게 상태값을 전달하거나 업데이트가 가능하다. 단순히 전역 상태관리만 한다면 Context API로 충분하지만, 프로젝트의 규모가 클 수록 리덕스를 사용해 상태를 더 체계적으로 관리할 수 있다. →→ 코드의 유지보수성을 높이고 작업효율( 편한 개발자 도구 지원, 미들웨어 기능 지원 )을 극대화 한다. 1. 개념 정리 액션 상태에 변화가 필요하면 액션이 발생한다. 객체로 표현되며 다음과 같은 형태를 갖는다. 대부분 이름은 대문자로 작성하며 고유성을 갖아야 한다. { type: 'Toggle_Value' } // 액션 객체는 type 필드를 갖어야 한다. 액션 생성 함수 액션 객체를 만..

Context API는 리액트 프로젝트에서 전역적으로 사용할 데이터(로그인 정보, 환경 설정, 테마 등) 가 있을 때 유용하게 사용된다. 리덕스, 리액트 라우터, styled-components 등의 라이브러리들은 Context API를 기반으로 구현된다. 1. Context API를 사용한 전역 상태 관리 흐름 리액트 애플리케이션은 컴포넌트간 데이터를 props로 전달하기에 필요한 데이터가 있을 때 주로 최상위 컴포넌트인 App의 state에 넣어 관리한다. → 항상 최상위 컴포넌트에서 목표하는 컴포넌트에 정보를 전달하기 까지 연결된 컴포넌트를 여러번 거쳐야한다. 이런 방식은 유지 보수성이 낮아질 가능성이 있다. 이러한 문제를 해결하려면 Context API를 사용하면 된다. Context API를 사..