개발/Redux (3) 썸네일형 리스트형 Redux 시작하기(3) - Reducer reducer를 좀 더 자세히 다루어 보겠다. 복잡한 앱을 만들 경우, reducer 함수가 점점 많아진다. 이걸 효율적으로 관리하기 위해 combineReducers라는 함수를 사용할 수 있다. combineReducers는 서로 다른 reducer 함수들을 받아서 하나의 reducer 함수로 만들어 준다. state의 모양을 다음과 같이 만들려고 한다고 하자. { num: 0, list: [] } 그러면 combineReducers는 다음과 같은 형태로 쓸 수 있다. (reducer.js) const numReducer = (state = 0, action) { switch (action.type) { case "INC_NUM": return state + 1; case "DEC_NUM": retur.. Redux 시작하기(2) - 개념 정리 1. Action Action은 상태 변화를 일으킬 때 참조할 객체로, 다음과 같은 형태를 가진다. { type: "LEVEL_UP", diff: 2 } 여기서 type 값은 필수적으로 가지고 있어야 한다. 1-1. Action Creator Action Creator는 말 그대로 Action을 만드는 함수다. 다음과 같이 만들 수 있다. const levUp1 = () => { return { type: "LEV_UP_1" } } const levUp2 = (difference) => { return { type: "LEV_UP_2", diff: difference } } const levUp3 = (request) => { return { type: "LEV_UP_3", payload: { reque.. Redux 시작하기(1) 1. Redux란? Redux는 상태 관리 라이브러리 중 하나다. React에 종속되는 건 아니라지만 React에서 쓰려고 만든 건 맞다. 2. Redux의 필요성 아래 그림과 같은 구조로 컴포넌트가 연결되어 있다고 가정하자. 여기서 A의 변화가 D에 영향을 주도록 만들기 위해서는 B에도 영향을 주어야 해서 번거롭다. 이 구조에서는 간단하겠지만, 더 깊은 구조의 경우 복잡할 것이다. 또한, D와 C 그리고 B와 C가 서로 영향을 주게 하기도 어렵다. 이러한 경우에 Store라는 것(다음 글에서 자세히 설명하겠다)을 통해 아래 그림과 같이 직접적으로 상호작용하게 할 수 있다. 위 그림처럼, D가 Store를 구독해서 특정 값이 변경되면 구독하는 과정에서 전달 받았던 함수를 호출한다. 그리고 위 그림처럼, .. 이전 1 다음
