컴과생의 끄적끄적

Container Redux의 공식 개념은 아니다. Redux를 React에 연동했을 때 사용하는 개념 Container Component의 준말로, Redux의 일부 state와 dispatcher를 포함하는 리액트 컴포넌트. (= Redux와 연결되어 있는 리액트 컴포넌트) react-redux React와 Redux를 연동하기 위해 사용하는 공식 바인딩 라이브러리 - Binding Library (= Binding) : 어떤 라이브러리를 특정 환경에서 사용하기 위해서, 그 환경과 라이브러리를 중간에서 묶어주는 역할을 하는 라이브러리 react-redux의 주요 API - Provider : 하위 컴포넌트들이 Redux Store에 접근할 수 있게 해줌 - mapStateToProps() : Redu..

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): 스토어에서..

컴포넌트란? 스타일을 만드는 HTML + CSS + JS의 결합 단위 [장점] - 재사용 가능 (Reusability) => 재사용가능한 빌딩 블록의 반복을 피하게 한다. - 우려사항들을 분리 (Separation of Concerns) => 코드베이스를 작고 관리 가능한 단위로 유지한다. 선언적 방식 리액트로 작업할 때는 항상 원하는 최종 상태(목표 상태)를 정의하는 것이 중요하다. 리액트가 하는 일은 실제 웹페이지에서 어떤 요소가 추가되거나, 삭제되고, 업데이트 되어야 하는지를 해결하는 것이다. 따라서 자바스크립트에서 하는 것처럼 직접 구체적인 DOM을 업데이트하는 지침들을 작성할 필요가 없다. Node.JS 설치 및 리액트 프로젝트 생성 리액트 설치 오류 시 [해결 방법] 1. 전역 설치된 리액트 ..

변수 let과 const var: 자바스크립트에서 변수 생성 (ES6에는 var도 물론 있지만, let과 const 사용을 권장) - let: 값을 수정할 수 있는 변수를 선언할 때 사용 (새로운 var) - const: 한번 지정하면 정대 변하지 않는 값인 상수를 선언할 때 사용 (새로운 값을 할당할 수 없는 키워드. 만약 실수로 값을 재할당하도록 코드를 작성했다면, 오류 발생🚨) const myName = 'Max'; console.log(myName); myName = 'Manu'; console.log(myName); "Max" "Manu"// var의 경우 "Max" "Manu"// let의 경우 (var과 결과 동일) "Max" "error"// const의 경우 (두 번째 console.lo..

리액트(react.js)란 무엇일까? 리액트(React) : 자바스크립트의 라이브러리로 사용자 인터페이스를 만드는데 사용 웹에서 모바일과 같은 빠른 반응성을 이끌어냄. 전통적인 웹사이트들은 새로운 html 페이지가 로딩되는 동안 기다려야 하기에 약간 무겁고 불편하게 느껴졌다면, 자바스크립트를 사용하면 DOM을 조작하여 브라우저 상에서 html 요소들을 변경할 수 있다. 따라서, 사용자에게 다른 것들을 보여주기 위해 새로운 html 페이지를 요청할 필요가 없다. 이것이 자바스크립트의 역할이고, 리액트 역시 자바스크립트 라이브러리이기 때문에 추가적 구성 요소로서 우리에게 도움이 된다. 자바스크립트에 추가로 리액트가 필요한 이유? 리액트와 연계해서 최신의 다채롭고 복잡한 사용자 인터페이스를 쉽게 구축할 수 있..