Redux (7) 썸네일형 리스트형 [Redux] 🌤 Redux-saga를 사용해 간단한 날씨 앱 만들기 본 글은 도서 '리액트를 다루는 기술, redux-saga을 참고하여 작성된 글입니다. 이전 글에서 redux-thunk를 통해 간단한 날씨 앱을 만들어 보았습니다. 이어서 이번 글에서는 redux-thunk 다음으로 가장 많이 사용되는 redux-saga를 사용하여 이전 글과 동일한 기능의 프로젝트를 만들어 보려 합니다. 🧰 redux-saga redux-saga는 위에서 언급한 바와 같이 redux-thunk 다음으로 가장 많이 사용되는 리덕스 미들웨어입니다. redux-thunk를 다시 생각해보면, 액션 객체 대신, 함수를 디스패치할 수 있게 도와주는 도구라고 했습니다. 오늘 사용할 redux-saga는 액션을 모니터링하고 있다가 특정 액션이 발생하면 이에 따라 특정 작업을 수행하는 방식을 사용합니.. [Redux] 🌤 Redux-thunk를 사용해 간단한 날씨 앱 만들기 본 글은 도서 '리액트를 다루는 기술', redux-thunk, redux-middleware를 참고하여 작성된 글입니다. 이전 글에 이어서 이번 글에서는 비동기 작업 처리를 도와주는 리덕스 미들웨어를 공부해보도록 하겠습니다. 🧰 redux-thunk, 그리고 thunk redux-thunk는 리덕스 미들웨어에서 비동기 작업을 처리하는 데 사용하는 미들웨어로 비동기 작업을 다루는 미들웨어 중에서 가장 대표적인 리덕스 미들웨어입니다. 위키백과-썽크에서 서술된 펑크의 정의를 보면, "썽크는 주로 연산 결과가 필요할 때까지 연산을 지연시키는 용도로 사용되거나, "라고 언급되어 있습니다. 그렇다면, 연산 결과를 지연시키는 방법은 무엇이 있을까요? 가령, 1+2를 출력하고 싶다면, 아래와 같이 코드를 작성하면 됩.. [Redux] ⛓ 리덕스 미들웨어란 무엇인가? (2) 본 글은 도서 '리액트를 다루는 기술'을 공부하며 정리한 글입니다. 리덕스를 통한 카운터 만들기 카운터를 만들어 보는 것은 리덕스의 가장 기초가 되는 예제입니다. 리덕스 미들웨어에 대해서 공부할 예정이기 때문에 카운터에 대한 설명은 생략하겠습니다. yarn add redux react-redux redux-actions -module/counter.js import { createAction, handleActions } from "redux-actions"; const INCREASE = "counter/INCREASE"; const DECREASE = "counter/DECREASE"; export const increase = createAction(INCREASE); export const dec.. [Redux] ⛓ 리덕스 미들웨어란 무엇인가? (1) 본 글은 도서 '리액트를 다루는 기술'을 공부하며 정리한 글입니다. ⛓ 리덕스 미들웨어란? 리덕스 미들웨어는 액션을 디스패치했을 때 리듀서에서 이를 처리하기에 앞서 사전에 지정된 작업을 실행할 수 있게 해줍니다. 액션과 리듀서 사이의 중간자라고 볼 수 있습니다. 전달받은 액션을 단순히 콘솔에 기록하거나, 전달받은 액션 정보를 기반으로 액션을 아예 취소하거나, 다른 종류의 액션을 추가하는 등 다양한 역할을 담당할 수 있습니다. 미들웨어의 구조는 아래와 같습니다. const loggerMiddleware = store => next => action => { //기본 구조 } export default loggerMiddleware; const loggerMiddleware = function loggerM.. [Redux] 🏃♂️ 리액트와 리덕스 함께 사용하기 (feat. ant-design) (2) 이전 글에 이어서 이번 글에서는 노트 앱의 컨테이너와 컴포넌트를 구성해보겠습니다. 폴더 구성은 컨테이너와 컴포넌트 두 가지로 나눌 예정인데, 결국 컨테이너도 마찬가지로 컴포넌트입니다. 하지만, 명칭을 나누는 이유는 상태 값의 변화를 담당하고 불러와야 하는 역할을 하는 똑똑한 컴포넌트를 컨테이너라 부르며, 유저에게 보이는 view 만을 구성하면 되는 컴포넌트를 멍청한 컴포넌트라 부릅니다. 이를 구분하여 파일을 구성하면 컴포넌트를 관리하고 구성하는데 훨씬 수월해지는 효과를 가져옵니다. 더 자세한 내용은 아래 링크를 참고하시면 좋을 것 같습니다. Functional vs Class-Components in React In this article I want to show you the differences b.. [Redux] 🏃♂️ 리액트와 리덕스 함께 사용하기 (feat. ant-design) (1) 이 글에서 함께 만들어볼 간단한 노트앱의 최종 소스는 아래 링크에 있습니다. youthfulhps/noteapp-react-redux-antd Ant-design을 이용한 간단한 노트앱입니다. Contribute to youthfulhps/noteapp-react-redux-antd development by creating an account on GitHub. github.com 그리고, 아래와 같은 모습의 앱을 만들 예정입니다. 1. create-react-app 우선, 새로운 앱을 생성하겠습니다. ~$ create-react-app noteapp-redux ~$ npm start //test 2. npm install ant-design UI framework, UI 디자인을 책임질 프레임워크입니.. [Redux] 🔧 리덕스는 무엇이고, 왜 사용하는가? 본 글은 아래 링크를 보고 공부하기 위해 정리한 것입니다. Redux (3) 리덕스를 리액트와 함께 사용하기 3-1. 리덕스의 3가지 규칙 리덕스를 프로젝트에서 사용하게 될 때 알아둬야 할 3가지 규칙이 있습니다. 1. 하나의 애플리케이션 안에는 하나의 스토어가 있습니다. 하나의 애플리케이션에선 단 한개의 스토어를 만들어서 사용합니다. 여러개의 스토어를 사용하는것은 사실 가능하기는 하나, 권장되지는 않습니다. 특정 업데이트가 너무 빈번하게 일어나거나, 애플... velog.io ant design UI를 통해 노트 앱을 만드는 중 state를 전달받은 하위 컴포넌트, 그 하위 컴포넌트의 하위 컴포넌트에서 발생한 이벤트에 의해 다른 컴포넌트의 하위 컴포넌트에 상태 값 변화해야 한다면 실제로 해당 props.. 이전 1 다음
