컴과생의 끄적끄적

Redux와 UI 관계 = 관계가 없다! Redux는 독자적인 자바스크립트 라이브러리로, 사용자에게 보이는 UI가 없이도 사용 가능하다. (따라서, 본래 React외에 NGULAR나 Vue와도 함꼐 사용가능하나 애초에 React와 궁합이 잘 맞도록 설계되었기에 React와 함께 사용하는 경우가 대부분이다.) Redux와 UI 연동 1. Redux Store 생성 2. Store가 UI 업데이트(재렌더링)를 구독(subscription) 목록에 추가 3. UI 업데이트 과정 1) 현재 Redux Store의 데이터(state)를 가져옴 2) 가져온 데이터 중 UI에서 필요로 하는 데이터만 추출 3) 추출한 데이터를 사용해서 UI 업데이트 4. 필요한 경우 초기 UI 렌더링 5. UI 입력이 발생한 경우 A..

Reducer : Action이 발생하면, Action을 실제로 처리하는 역할을 하는 함수 = 입력에 어떤 처리를 해서, 원하는 결과로 축소시키는 과정 [역할] Redux State에 변화를 주는 역할 function appReducer(state = initialState, action) { switch(action.type) { case 'PUSH_ITEM': return [...state, action.item]; case 'POP_ITEM': const newState = [...state]; // (state 변화가 아닌) 새로운 state를 생성! newState.pop(); return newState; default: return state; } } Rules of Reducer Only ..

Action : Redux Store에 저장된 데이터(State)에 변화를 주기 위한 행동 *Redux Action은 JavaScript 객체 형태로 존재 (일반 JS 객체와 다른 점은, type이라는 필드를 무조건 포함한다는 점! type - Redux Action의 type을 의미.) { type: 'ADD_TODO', // type: Action의 이름(개발자가 정의) text: 'Redux 공부하기' // (payload): Action을 처리하는 데 필요한 부가 데이터 } Action Creator : Action 객체를 생성하는 역할을 하는 JavaScript 함수 function addTodo(text) { return { // 여기서 리턴하는 객체가 바로 Redux Action 객체 typ..

Store : Redux의 데이터들을 저장하기 위한 저장소 실제 저장이 아닌, State management의 의미 → Redux Store의 데이터들을 저장장치에 저장되지 않음! - Redux Store는 데이터를 어떻게 관리할까? : JavaScript 변수를 통해 데이터를 관리 * 웹브라우저 새로고침, 컴퓨터 재부팅 시에 Redux Store의 데이터는 모두 날아감! - 트리 형태로 저장되는 Redux Store의 데이터들 Dispatcher : Action을 발송하는 역할 (수신자는 Redux) - Store의 dispatch 함수를 통해 디스패처 역할을 함 Store 관련 함수 createStore() : Redux Store를 생성하는 역할을 하는 함수 const store = creatSto..

Redux 구성 요소 Store(스토어) : Redux의 데이터들을 저장하기 위한 저장소 State : Redux Store에 저장되어 있는 데이터 Action(액션) : Redux Store에 저장된 데이터에 변화를 주기 위한 행동 (JavaScript 객체 형태로 존재) Action 생성자 : Action 객체를 생성하는 역할을 하는 함수 Reducer : 입력에 어떤 처리를 해서, 원하는 결과로 축소시키는 과정 = Action이 발생하면, Action을 실제로 처리하는 역할을 하는 함수 Immutability (불변성) : 리덕스 원칙 중 2. State is read-only 3. Changes are made with pure functions => Redux State 생성 후에는 값을 바꿀 ..

리덕스(Redux) 탄생 과정 SPA 등장으로, 웹사이트의 규모가 커짐 → 상태 관리의 복잡도 증가 (서버로부터 받아온 데이터, 로컬 데이터, UI 컴포넌트의 상태 등..) 언제 어디서 어떻게 상태(state)가 업데이트 되는지 파악하기 힘들어짐 상태 업데이트의 원인을 파악할 수 없다면, 버그 재현 및 수정이 어려움 상태 관리만을 위한 리덕스(Redux) 등장! Flux 아키텍처 : 단방향 데이터 흐름을 활용한 리액트용 애플리케이션 아키텍쳐 = 데이터의 흐름을 정의한 하나의 방법 액션(Action): 데이터 흐름에 변화를 주기 위한 어떤 동작이 발생한 것 디스패처(Dispatcher): 액션을 발송하는 역할 (액션의 수신자: 리덕스) 스토어(Store): 데이터를 저장하는 공간 뷰(View): 스토어에서..