Jacob's Development Blog

이번 글은 MobX의 사용에 관한 부분이나 코드 등을 다루진 않는다. 그냥 배워보기 전에 약간의 배경지식(?)이라고 하면 될 거 같다. 꼭 필요한 글은 아니니, 궁금하지 않다면 바로 다음 글을 읽어봐도 좋다. 시작 전 넋두리.. 리액트로 앱을 만들면서 얼마 안돼, 우리는 상태 관리에 대한 고민을 시작한다. 특정 컴포넌트의 상태 값을 다른 컴포넌트와 공유하고 싶다는 생각이다. 그래서 처음에는 prop을 통해 상위 컴포넌트로 상태 값을 전달하기 시작한다. 물론 매우 훌륭한 방법이다. 하지만, 또다시 위기에 봉착한다. 컴포넌트가 많아지고 그 깊이가 깊어질수록 상태 값을 전달하는 게 너무 복잡해지기 때문이다. Redux is a predictable state container for JavaScript app..

Redux Reducer와 Array.reduce Redux를 사용하기 시작하면 가장 먼저 작성해 보는 것이 리듀서(Reducer)이다. 그런데 이 리듀서에 대해 이해를 하지 않고 넘어가면, 나중에 분명 헷갈리는 경우가 생긴다. 그래서 이번에는 리듀서에 대해 조금 더 깊게 알아보려고 한다. Where does the name "reducer" come from? 리듀서라는 용어는 어디서 등장했을까? 이것만 알면 리듀서에 대한 이해는 끝났다고 봐도 된다. 항상 구글 번역기에 돌려봐도 "감속기"라고만 나와서 짜증 났는데! 그런데 곰곰이 생각해 보니, 구글 번역기에 돌렸던 이유는 이 단어를 잘 몰라서이고, 알려고 하지도 않고 "리듀서"라는 단어로만 받아 드려서 그렇다. 일단 속는 셈 치고 Javascript의..

스토어 → 애플리케이션의 상태(state)를 가지고 있는 곳 → createStore라는 함수를 가지고 있고 이를 통해 스토어를 생성 → 스토어는 애플리케이션 내부에서 유일성을 가진다. 플럭스 표준 액션(Flux Standard Action) → 액션의 형식을 표준화한 것(with 페이스북 개발자) → 디자인 목표: Human-friendly, Useful, Simple 액션크리에이터(ActionCreator) → 액션을 생성하기 위한 함수 → 액션크리에이터를 만들어 두면 액션 테스트를 쉽게 할 수 있으며, 실제로 액션을 사용하는 경우에도 직감적으로 쉽게 사용할 수 있다. const addTask = task => ({ type: 'ADD_TASK', payload: { task } }) createSt..

리듀서(Reducer)란? → 리듀서는 이전 상태와 동작을 받아 새 상태를 리턴한다. → 리듀서는 반드시 순수 함수여야 한다. 이를테면 데이터베이스 호출이나 HTTP 호출 등 외부의 데이터 구조를 변형하는 호출은 허용되지 않는다. → 리듀서는 항상 현재 상태를 '읽기 전용'으로 다룬다. 기존 상태를 변경하지는 않지만 새 상태를 리턴은 할 수 있다. 리듀서가 포함하고 있는 세 가지. 할 일을 정의하는 Action(인수는 옵션) 애플리케이션의 모든 데이터를 저장하는 state state와 Action을 받아 새 상태를 리턴하는 Reducer 첫 리듀서 만들기 가장 단순한 리듀서는 상태 자체만을 리턴한다(identity reducer라고 한다). interface Action { type: string; pa..