1. Context API # Context API를 이용하면 여러 컴포넌트에서 사용해야 하는 State를 한번에 Props로 내려줄 수 있음. 하지만, Context API를 사용하면 상위, 하위 컴포넌트가 더 밀접하게 결합하게 되어 컴포넌트의 재사용성을 훼손하게 되므로 단지 Props Drilling을 해결하고자 하는 게 목적이라면 컴포넌트 합성을 쓰는 것이 더 간단함. A. Context 생성 # // App.jsx import { createContext } from "react"; export const AppContext = createContext(null); B. Context 값 전달하기 const App = () => { return ( ); } 앞서 만들어준 AppContext 객체에..
1. Thunk Middleware 앞서 Reducer는 Side-effect가 없는 순수함수여야 함을 알았음. 하지만, 네트워크 통신, 데이터 내보내기, setTimeout()와 같은 타이머 등 Side-effect가 없는 애플리케이션은 존재하지 않기 때문에 Redux에서 Side-effect를 다룰 수 있는 방법이 필요함. 이러한 Side-effect를 처리하기 위해 disptach()가 Store에 작업을 전달하기 전에 특수한 일을 할 수 있도록 disptach를 커스텀하는 함수인 Middleware라는 개념이 도입됨. Middleware는 UI 컴포넌트와 Store의 연결 다리 역할을 하기 때문에 Middleware에는 일반 객체가 아닌 값(ex. Promise)이 전달될 수 있고(순수함수일 필요..
1. Redux 기본 개념 A. Redux란? a. 여러 컴포넌트간 공유가 필요한 Global State를 저장하는 하나의 공간 Store가 존재 b. 특정한 이벤트가 발생할 경우, action 객체를 Store에 전달함 c. action을 관찰해 불변성(Immutable)을 유지하도록 State를 업데이트하는 Reducer 함수로 이루어짐 B. Redux의 3가지 원칙 1. Single Source of Truth 어플리케이션의 모든 Global State는 유일한 Store에 하나의 객체 트리 구조로 저장되어야 함. 2. Read-Only State State를 변화시키는 방법은 오직 action 객체를 Store에 전달하는 것뿐이고, 그 외에 State를 변화시키는 방법은 존재하지 않아야 함. 3...
JavaScript/React 2022. 7. 20. 22:30
1. Context API # Context API를 이용하면 여러 컴포넌트에서 사용해야 하는 State를 한번에 Props로 내려줄 수 있음. 하지만, Context API를 사용하면 상위, 하위 컴포넌트가 더 밀접하게 결합하게 되어 컴포넌트의 재사용성을 훼손하게 되므로 단지 Props Drilling을 해결하고자 하는 게 목적이라면 컴포넌트 합성을 쓰는 것이 더 간단함. A. Context 생성 # // App.jsx import { createContext } from "react"; export const AppContext = createContext(null); B. Context 값 전달하기 const App = () => { return ( ); } 앞서 만들어준 AppContext 객체에..
JavaScript/Redux 2022. 7. 2. 17:27
1. Thunk Middleware 앞서 Reducer는 Side-effect가 없는 순수함수여야 함을 알았음. 하지만, 네트워크 통신, 데이터 내보내기, setTimeout()와 같은 타이머 등 Side-effect가 없는 애플리케이션은 존재하지 않기 때문에 Redux에서 Side-effect를 다룰 수 있는 방법이 필요함. 이러한 Side-effect를 처리하기 위해 disptach()가 Store에 작업을 전달하기 전에 특수한 일을 할 수 있도록 disptach를 커스텀하는 함수인 Middleware라는 개념이 도입됨. Middleware는 UI 컴포넌트와 Store의 연결 다리 역할을 하기 때문에 Middleware에는 일반 객체가 아닌 값(ex. Promise)이 전달될 수 있고(순수함수일 필요..
JavaScript/Redux 2022. 6. 15. 11:46
1. Redux 기본 개념 A. Redux란? a. 여러 컴포넌트간 공유가 필요한 Global State를 저장하는 하나의 공간 Store가 존재 b. 특정한 이벤트가 발생할 경우, action 객체를 Store에 전달함 c. action을 관찰해 불변성(Immutable)을 유지하도록 State를 업데이트하는 Reducer 함수로 이루어짐 B. Redux의 3가지 원칙 1. Single Source of Truth 어플리케이션의 모든 Global State는 유일한 Store에 하나의 객체 트리 구조로 저장되어야 함. 2. Read-Only State State를 변화시키는 방법은 오직 action 객체를 Store에 전달하는 것뿐이고, 그 외에 State를 변화시키는 방법은 존재하지 않아야 함. 3...