본문 바로가기

전체 글

(79)
[React] 리덕스 redux-thunk [React] 리덕스 redux-thunk 안녕하세요. 배워가며 성장하는 개발자 DevRappers입니다. 이번 포스팅에서는 리액트 Redux redux-thunk에 대해서 포스팅하려고 합니다. redux-thunk란? 리덕스에서 비동기 작업을 처리할 때 가장 많이 사용하는 미들웨어입니다. 이 미들웨어를 사용하면 액션 객체가 아닌 함수를 디스패치 할 수 있습니다. 이제 redux-thunk를 설치하고 적용해보도록 하겠습니다. 먼저 redux-thunk라이브러리를 설치해줍시다. $ yarn add redux-thunk 설치가 완료됬으면 index.js에서 redux-thunk를 불러와서 적용시켜줍니다. import React from 'react'; import ReactDOM from 'react-dom..
[React] 리덕스 redux-logger [React] 리덕스 redux-logger 안녕하세요. 배워가며 성장하는 개발자 DevRappers입니다. 이번 포스팅에서는 리액트 Redux redux-logger에 대해서 포스팅하려고 합니다. 먼저 redux-logger라이브러리를 설치해줍니다. $ yarn add redux-logger 그 다음에 index.js에서 불러와서 적용을 해보겠습니다. 리덕스에서 미들웨어를 적용할 때에는 여러개의 미들웨어를 등록할 수 있습니다. import React from 'react'; import ReactDOM from 'react-dom'; import './index.css'; import App from './App'; import * as serviceWorker from './serviceWorker'..
[React] 리덕스 미들웨어만들기 [React] 리덕스 미들웨어만들기 안녕하세요. 배워가며 성장하는 개발자 DevRappers입니다. 이번 포스팅에서는 리액트 Redux 미들웨어만들기에 대해서 포스팅하려고 합니다. 먼저 새로운 프로젝트를 만들어보겠습니다. $ npx create-react-app learn-redux-middleware 그리고 해당 디렉터리에서 redux와 react-redux라이브러리를 설치해줍니다. $ yarn add redux react-redux 먼저 미들웨어를 만들어보기전에 모듈과 컴포넌트를 구현해보도록 하겠습니다. 가볍게 counter를 만들어보겠습니다. src디렉터리 밑에 modules디렉터리를 만들고 그안에 counter.js파일을 생성해줍니다. // 액션 타입 const INCREASE = 'INCREAS..
[React] 리덕스 미들웨어란? [React] 리덕스 미들웨어란? 안녕하세요. 배워가며 성장하는 개발자 DevRappers입니다. 이번 포스팅에서는 리액트 Redux 미들웨어에 대해서 포스팅하려고 합니다. 리덕스 미들웨어는 리덕스가 지니고 있는 핵심 기능입니다. 리덕스와 비교되는 ContextAPI, MobX를 사용하는것과 차별화가 되는 부분입니다. 리덕스 미들웨어를 사용하면 액션이 디스패치 된 다음 리듀서에서 해당 액션을 받아와서 업데이트 하기 전에 추가적인 작업을 수행할 수 있습니다. 이러한 작업들의 예로는 1. 특정 조건에 따라 액션이 무시되게 만들 수 있습니다. 2. 액션을 콘솔에 출력하거나 서버쪽에 로깅을 할 수 있습니다. 3. 액션이 디스패치 됐을 때 이를 수정해서 리듀서에게 전달되도록 할 수 있습니다. 4. 특정 액션이 발..
[React] 리덕스 TodoList만들기 [React] 리덕스 TodoList만들기 안녕하세요. 배워가며 성장하는 개발자 DevRappers입니다. 이번 포스팅에서는 리액트 Redux TodoList만들기에 대해서 포스팅하려고 합니다. 먼저 TodoList 프리젠테이셔널 컴포넌트를 구현해보도록 하겠습니다. components디렉터리에 Todos.js파일을 생성해줍니다. import React, { useState } from 'react'; // 컴포넌트 최적화를 위하여 React.memo를 사용함 const TodoItem = React.memo(function TodoItem({ todo, onToggle }) { return ( onToggle(todo.id)}> {todo.text} ); }); // 컴포넌트 최적화를 위하여 React...
[React] 리덕스 개발자도구 적용하기 [React] 리덕스 개발자도구 적용하기 안녕하세요. 배워가며 성장하는 개발자 DevRappers입니다. 이번 포스팅에서는 리액트 Redux 개발자도구에 대해서 포스팅하려고 합니다. 리덕스 개발자 도구를 사용하면 현재 스토어의 상태를 개발자 도구에서 조회 할 수 있고 지금까지 어떤 액션들이 디스패치 되었는지, 액션에 따라 상태가 어떻게 변화했는지 확인 할 수 있습니다. 추가적으로 액션을 직접 디스패치 할 수 도 있습니다. 먼저 크롬 웹스토어에서 확장 프로그램을 설치해줍니다. https://chrome.google.com/webstore/detail/redux-devtools/lmhkpmbekcpmknklioeibfkpmmfibljd Redux DevTools Redux DevTools for debugg..
[React] 리덕스 카운터 구현하기 [React] 리덕스 카운터 구현하기 안녕하세요. 배워가며 성장하는 개발자 DevRappers입니다. 이번 포스팅에서는 리액트 Redux 카운터 구현하기에 대해서 포스팅하려고 합니다. 저번 포스팅에서 redux를 react에서 사용할 수 있도록 연결시켜주었고 이번 포스팅에서는 컴포넌트에서 리덕스를 사용해보도록 하겠습니다. 먼저 프리젠테이셔널 컴포넌트를 만들어보도록 하겠습니다. 프리젠테이셔널 컴포넌트란 리덕스 스토어에 직접 접근하지 않고 필요한 값 또는 함수를 props로 받아와 사용하는 컴포넌트 입니다. src디렉터리 밑에 components 디렉터리를 만들고 Counter.js를 만들어줍니다. import React from 'react'; function Counter({ number, diff, o..
[React] 리덕스 모듈 만들기 [React] 리덕스 모듈 만들기 안녕하세요. 배워가며 성장하는 개발자 DevRappers입니다. 이번 포스팅에서는 리액트 Redux모듈 만들기에 대해서 포스팅하려고 합니다. 리액트 프로젝트에 리덕스를 적용하기 위해 리덕스 모듈을 만들어보도록 하겠습니다. 모듈이란 액션타입, 액션 생성함수, 리듀서가 모두 들어있는 자바스크립트 파일을 의미합니다. 이번 포스팅에서도 그렇고 리덕스를 다룰때에는 Ducks 패턴이라는 것을 이용할 것인데요. Ducks패턴이란 쉽게 리듀서와 액션 관련 코드들을 하나의 파일에 몰아서 작성하는 것을 의미합니다. 1. Counter 모듈 만들기 먼저 src디렉터리에 modules디렉터리를 만들고 그 안에 counter.js파일을 생성하여 다음 코드를 작성해줍니다. // 액션 타입 만들기..