crabLab

redux-thunk Thunk는 특정 작업을 나중에 할 수 있도록 미루기 위해 함수 형태로 감싼 것을 의미합니다. 예를 들어 주어진 파라미터에 1을 더하는 함수를 만들고 싶다면 다음과 같이 작성할 것입니다. const addOne = x => x + 1; addOne(1); // 2 이 코드를 실행하면 addOne을 호출했을 때 바로 1 + 1이 연산됩니다. 그런데 이 연산 작업을 나중에 하도록 미루고 싶다면 어떻게 해야 할까요? const addOne = x => x + 1; function addOneThunk (x){ const thunk = () => addOne(x); return thunk; } const fn = addOneThunk(1); setTimeout(() => { const va..

리액트 웹 애플리케이션에서 API 서버를 연동할 때는 API 요청에 대한 상태도 잘 관리해야 합니다. 예를 들어 요청이 시작되었을 때는 로딩 중임을, 요청이 성공하거나 실패했을 때는 로딩이 끝났음을 명시해야 합니다. 요청이 성공하면 서버에서 받아 온 응답에 대한 상태를 관리하고, 요청이 실패하면 서버에서 반환한 에러에 대한 상태를 관리해야 합니다. 리액트 프로젝트에서 리덕스를 사용하고 있으며 이러한 비동기 작업을 관리해야 한다면, ‘미들웨어(middleware)’를 사용하여 매우 효율적이고 편하게 상태 관리를 할 수 있습니다. 미들웨어란? 리덕스 미들웨어는 액션을 디스패치했을 때 리듀서에서 이를 처리하기에 앞서 사전에 지정된 작업들을 실행합니다. 미들웨어는 액션과 리듀서 사이의 중간자라고 볼 수 있습니다..

최종 구조 App ├─ Counter Container │ └─ Counter Component └─ Todos Container └─ Todos Component 리액트 애플리케이션에 리덕스 적용하기 요약 루트 리듀서 만들기 counter와 todo 모듈을 설정하면 counter 리듀서와 todo 리듀서 두 개가 생성된다. 리덕스에서 제공하는 combineReducers 유틸함수를 통해 modules/index.js에서 rootReducer 생성한다 const rootReducer = combineReducers({ counter, todos }) 스토어 생성하기 redux의 createStore 함수로 src/index.js에 생성 ( 전역으로 사용하기 때문에 ) Provider 컴포넌트를 사용하여 ..

리덕스 더 편하게 사용하기 액션 생성 함수, 리듀서를 작성할 때 redux-actions라는 라이브러리와 이전에 배웠던 immer 라이브러리를 활용하면 리덕스를 훨씬 편하게 사용할 수 있습니다. redux-actions 액션 생성 함수를 더 짧게 작성할 수 있다. switch/case 문이 아닌 handleActions 함수 사용 가능 업데이트 함수를 설정하는 형식으로 작성 counter 모듈에 적용하기 // createAction을 이용해 액션 생성 함수 설정 export const increase = createAction(INCREASE); export const decrease = createAction(DECREASE); // handleActions를 이용한 리듀서 함수 설정 const cou..

소규모 프로젝트에서는 컴포넌트가 가진 state를 사용하는 것만으로도 충분하지만, 프로젝트의 규모가 커짐에 따라 상태 관리가 번거로워질 수 있습니다. 리액트 애플리케이션에서 리덕스를 사용하면, 상태 업데이트에 관한 로직을 모듈로 따로 분리하여 컴포넌트 파일과 별개로 관리할 수 있으므로 코드를 유지 보수하는 데 도움이 됩니다. 또한, 여러 컴포넌트에서 동일한 상태를 공유해야 할 때 매우 유용하며, 실제 업데이트가 필요한 컴포넌트만 리렌더링되도록 쉽게 최적화해 줄 수도 있습니다. store 보단 react-redux 라이브러리에서 제공하는 유틸 함수 connect와 컴포넌트 Provider 사용하여 리덕스 관련 작업 처리. 작업 환경 설정 yarn create react-app react-redux-tuto..

리덕스는 가장 많이 사용하는 리액트 상태 관리 라이브러리입니다. 리덕스를 사용하면 컴포넌트의 상태 업데이트 관련 로직을 다른 파일로 분리시켜서 더욱 효율적으로 관리할 수 있습니다. 또한, 컴포넌트끼리 똑같은 상태를 공유해야 할 때도 여러 컴포넌트를 거치지 않고 손쉽게 상태 값을 전달하거나 업데이트할 수 있습니다. 리덕스 라이브러리는 전역 상태를 관리할 때 굉장히 효과적입니다. 코드의 유지 보수성도 높여 주고 작업 효율도 극대화해 주기 때문입니다. 추가로 아주 편리한 개발자 도구도 지원하며, 미들웨어라는 기능을 제공하여 비동기 작업을 훨씬 효율적으로 관리할 수 있게 해 주기도 합니다. 개념 미리 정리하기 액션 객체는 type 필드를 반드시 가지고 있어야 합니다. 이 값이 액션의 이름 액션 생성 함수(act..

Context API는 리액트 프로젝트에서 전역적으로 사용할 데이터가 있을 때 유용한 기능입니다. 이를테면 사용자 로그인 정보, 애플리케이션 환경 설정, 테마 등 여러 종류가 있겠지요. Context API를 사용한 전역 상태 관리 흐름 이해하기 프로젝트 내에서 환경 설정, 사용자 정보와 같은 전역적으로 필요한 상태를 관리해야 할 때는 어떻게 해야 할까요? 리액트 애플리케이션은 컴포넌트 간에 데이터를 props로 전달하기 때문에 컴포넌트 여기저기서 필요한 데이터가 있을 때는 주로 최상위 컴포넌트인 App의 state에 넣어서 관리합니다. G 컴포넌트는 전역 상태를 업데이트시키고, F와 J 컴포넌트는 업데이트된 상태를 렌더링합니다. 그렇다면 App 컴포넌트에서는 다음과 같이 상태와 업데이트 함수를 정의해야..

비동기 작업의 이해 웹 애플리케이션을 만들다 보면 처리할 때 시간이 걸리는 작업이 있습니다. 예를 들어 웹 애플리케이션에서 서버 쪽 데이터가 필요할 때는 Ajax 기법을 사용하여 서버의 API를 호출함으로써 데이터를 수신합니다. 이렇게 서버의 API를 사용해야 할 때는 네트워크 송수신 과정에서 시간이 걸리기 때문에 작업이 즉시 처리되는 것이 아니라, 응답을 받을 때까지 기다렸다가 전달받은 응답 데이터를 처리합니다. 이 과정에서 해당 작업을 비동기적으로 처리하게 됩니다. 비동기적 처리 요청을 처리하더라도 웹 애플리케이션이 멈추지 않고 동시에 여러 가지 요청을 처리 가능 기다리는 과정에서 여러 함수도 호출 가능 서버 요청외에 특정 작업을 예약할 때 동기적 처리 한 요청이 끝날 때까지 기다리는 동안 중지 상태..

SPA란? SPA는 Single Page Application(싱글 페이지 애플리케이션)의 약어입니다. 말 그대로 한 개의 페이지로 이루어진 애플리케이션이라는 의미입니다. 전통적인 웹 페이지는 다음과 같이 여러 페이지로 구성되어 있습니다. 기존방식 다른 페이지로 이동할 때 마다 새로운 html, 페이지 로딩 시 서버에서 리소스 전달받아 해석한 뒤 화면 보여줌 사용자에게 보이는 화면은 서버 측에서 준비. 유동적인 html 생성해주는 템플릿 엔진 사용 서버 측에서 모든 뷰를 준비한다면 성능상의 문제가 발생 바뀌지 않은 부분까지 새로 불러와 불필요한 로딩이 있어 비효율적 Single Page Application: 말 그대로 한 개의 페이지로 이루어진 애플리케이션 뷰 렌더링을 사용자의 브라우저가 담당. 애플리..

Immer 설치 yarn add immer 핵심 : 불변성에 신경 쓰지 않는 것처럼 코드를 작성하되, 불변성 관리는 제대로 해주는 것 단순하게 깊은 곳에 위치하는 값을 바꾸는 것 외에도 배열을 처리할 때도 쉽다. concat 이나 ...연산자 말고도 push, splice로 관리 가능 예시 코드 import produce from 'immer'; const nextState = produce(originalState, draft => { // 바꾸고 싶은 값 바꾸기 draft.somewhere.deep.inside = 5; }) produce라는 함수는 두 가지 파라미터를 받습니다. 첫 번째 파라미터는 수정하고 싶은 상태이고, 두 번째 파라미터는 상태를 어떻게 업데이트할지 정의하는 함수입니다. 두 번째 ..