리액트20 redux-thunk란? | redux-thunk redux-thunk는 리덕스에서 비동기 작업을 처리 할 때 가장 많이 사용하는 미들웨어입니다. 이 미들웨어를 사용하면 액션 객체가 아닌 함수를 디스패치 할 수 있습니다. 함수를 디스패치 할 때에는, 해당 함수에서 dispatch 와 getState 를 파라미터로 받아와야 합니다. 이런 함수를 만들어주는 함수를 thunk 라고 부릅니다. thunk 사용 예 const getComments = () => (dispatch, getState) =>{ //여기서는 action을 disaptch 할 수 있습니다. //또한 getState 를 이용하여 현재 상태로 조회가 가능합니다. const id = getState().post.activeId; //요청이 시작했으을 알리는 액션 dis.. 2021. 2. 18. 리덕스 미들웨어 | 리덕스 미들웨어 리덕스 미들웨어는 action을 dispatch 했을 때 reducer 에서 처리하기에 앞서 사전에 지정된 추가적인 작업을 실행할 수 있게 해줍니다. 즉, 중간역할 을 담당한다고 생각하시면 됩니다! 일반적으로 리덕스 미들웨어는 라이브러리를 설치하여 사용하며, 주로 비동기 작업을 처리 할 때 사용됩니다. 라이브러리의 종류로는 redux-thunk redux-saga redux-observable redux-promise-middleware 등이 있습니다. 이 중 자주 사용되는것은 redux-thunk 와 redux-saga 입니다. 흐름 액션 -> 미들웨어 -> 리듀서 -> 스토어 추가적은 작업의 종류 특정 조건에 따라 action 을 무시하게 만들 수 있습니다. 액션을 콘솔에 출력 O.. 2021. 2. 17. 리덕스 모듈 만들기 프로젝트에 리덕스를 적용하기 위해 리덕스 모듈을 만들어 보겠습니다. | 리덕스 모듈이란 ? 구성요소 액션타입 액션 생성함수 리듀서 위와 같이 리덕스 모듈을 사용하기 위해 총 3가지 항목이 존재합니다. 첫 번째 리덕스 모듈.js //액션 타입 만들기 //Ducks 패턴을 따를땐 액션의 이름에 접두사를 넣어주세요, // -> 다른 모듈과 액션 이름이 중복되는 것을 방지할 수 있습니다. const SET_DIFF = 'counter/SET_DIFF'; const INCREASE = 'counter/INCREASE'; const DECREASE = 'counter/DECREASE'; //액션 생성함수 만들기 export const setDiff = (diff) => ({ type: SET_DIFF, diff }.. 2021. 2. 16. Immer 를 이용한 불변성 관리 | Immer 란 ? 리액트에서 배열이나 객체를 업데이트 해야 할 때 직접 수정은 절대 하면 안되며, 불변성을 지켜주어야 합니다. 직접 수정하는 경우 const a = { a: 1, b: 2 }; a.a = 4; 이런 방법을 다음과 같이 업데이트 해야합니다. const a = { a: 1, b: 2 }; const change = { ...a, b:3 }; 배열도 마찬가지로 push,splice등 함수를 사용하거나 n 번째 항목을 직접 수정하면 안되며 concat, filter, map 함수를 이용하여 생성해야합니다. spread연산자( = ... 연산자) 는 구조가 deep할수록 코드가 조금 복잡해집니다. 따라서, immer라는 라이브러리를 사용하여 구현하면 보다 쉽게 가독성이 높은 코드로 구현할 수 .. 2021. 2. 11. Context API를 이용한 전역 값 관리 | Context API 란 ? ContextAPI는** "징검다리"** 같은 역할을 해줍니다. 특정 함수를 특정 컴포넌트를 거쳐 원하는 컴포넌트에게 전달하는 작업은 리액트로 개발하다보면 자주 발생하는데요, Componet 1개 정도는 큰 불편함이 없지만, 여러개의 컴포넌트를 거쳐 전달하게 된다면 어떻게 될까요? 이럴경우에 Context API를 사용하여 전달하면 매우 편리하게 전역으로 전달할 수 있습니다. | Context API 사용 React.createContext(null); Context를 생성할때는 다음과 같이 React.createContext() 를 사용하여 만듭니다. 파라미터값으로는 Context의 기본값이 되며, Context의 value값을 찾을 수 없을 때 기본값이 사용됩니다. 기.. 2021. 2. 10. useReducer()란? | useReducer 이해하기 상태를 업데이트 할 때에는 useState 를 사용해서 새로운 상태를 설정해주었습니다. 하지만 이 방법 말고도 더 다른 유용한 방법이 존재하는데 바로 useReducer 를 이용하여 상태를 관리하는것입니다. 이 Hook 함수를 사용하면 컴포넌트의 상태 업데이트 로직을 컴포넌트에서 분리할 수 있습니다. 상태 업데이트 로직을 컴포넌트 바깥에 작성 할 수 있고, 다른 파일에 작성 후 불러와서 사용할 수 있습니다. reducer 는 현재 상태와 액션객체를 파라미터로 받아아서 새로운 상태를 반환해주는 함수입니다. function reducer(state,action){ //새로운 상태를 만드는 로직 return nextState; } reducer에서 반환하는 상태는 곧 컴포넌트가.. 2021. 2. 10. 이전 1 2 3 4 다음
