리덕스 2

[Redux]미들웨어(middleware)

🤔 미들웨어는 무엇인가? action에서 선언된 state를 변경하는 부분이 dispatch를 통해 실행되기 전에 동작한다. 즉, action 과 dispatch 사이에서 일어나는 동작을 제어하는 도구라고 이해하면 되겠다. 비동기를 구현할 때 용이하며, 리덕스에 비동기 관리 tool로는 redux-thunk, redux-saga 정도가 있다. [기본 템플릿] const middleware = store => next => action => { (1) next(action) //기본 기능 : action이 dispatch를 통해 실행된다. (2) } 함수가 중첩된 형태이다. 파라미터가 3개 이고 return 문이 2개인 고차함수 형태이다. 이를 function 으로 다시 작성해본다면, function mi..

Frontend/React 2022.08.14

[Redux] 관심사의 분리(SoC)

👉 관심사의 분리 (Seperation of Concerns) : 특정한 관심사에 따라 기능을 구분하여, 각 기능들마다 개개의 관심사를 해결하기 위한 코드를 작성하는 패턴이다. 함수를 최대한 간결한 형태로 구현하여, 프로세스의 복잡도를 낮추고, 재사용성을 높이며, 유지보수를 원할하게 합니다. 리덕스도 이 "관심사의 분리"를 통해 폴더 구조를 나누어 볼 수 있는데, 크게 나뉠 수 있는 파트가 "리듀서(reducer)"와 "액션(action)" 이다. 예를 들어, 데이터를 기준으로 유저와 관련된 기능들은 user.js 에 다 넣어두고 사용, 마찬가지로 게시글과 관련된 기능들은 boards.js에서 관리한다. 리듀서 같은 경우는, 순수함수로 정의가 되어 있기 때문에 분리하기 굉장히 편리하다. const ini..

Frontend/React 2022.08.14