# redux

gandalfzzing

1. 컨테이너 컴포넌트 만들기 저번글에서 모듈화 시킨 것들은 reducer와 액션을 만들고 스토어를 만들었던 것이라면 컨테이너 컴포넌트에서는 디스패치를 액션에 전달하는 컴포넌트들을 작성 할 것입니다. container 폴더를 만들고 그안에 먼저 덧셈 기능을 가진 c

gandalfzzing

Redux를 공부하겠습니다. 먼저 Redux의 탄생배경부터 알아보겠습니다. react의 각 컴포넌트들은 스테이트를 가져도 서로 공유하거나, 접근하기가 매우 까다롭고 어렵습니다. 그래서 이를 서로 간섭하기 쉽고, 관리하게 편하게 해주는 것이 필요로 했는데 그것이 Redu

eungook

React 상태 관리를 할 때 저는 Redux를 좋아하는데요, 한 번 구조를 정리해놓고 나중에 참고 해보려고 합니다.

valhadreams

React SPA 개발을 위한 라이브러리. Component기반 개발 방식. CRA 툴을 사용하여 손쉽게 프로젝트 환경 세팅. 제일 많이 사용하는 프론트엔드 라이브러리. 사용법 CRA로 프로젝트 초기 세팅. 기능별로 Component를 만들고 연동. state/props로 각각의 Component끼리 data를 주고 받음. state/props stat...

ksh4820

https://www.themoviedb.org/?language=ko-KR 에서 제공하는 API를 사용하여 리액트 프로젝트를 진행해보려고 합니다. API 호출 후 상태 관리는 redux를 사용할 예정입니다. 프로젝트 생성 및 라이브러리 설치 Axios axios는 가장 인기 있는 자바스크립트 HTTP 클라이언트 입니다. 이 라이브러리는 HTTP 요...

jereint20

들어가기 전에: 처음 회사에 들어와서는 코드에 적응하고 숙달하는 과정을 거쳤고, 동작하는 프로그램을 빠르게 만드는데 집중했습니다. 그 과정 속에서 코딩 속도나 프론트엔드 구조에 대한 이해 등의 성장을 이룰 수 있었습니다. (말을 순화해서 이정도인겁니다. 진짜 지옥의 행군을 경험했고, 지금도 그걸 해냈다는게 신기할 지경입니다. 동시에 이게 돌아가? 라는 불안...

naseriansuzie

Today What I Learned Javascript를 배우고 있습니다. 매일 배운 것을 이해한만큼 정리해봅니다. * 지난 2주 프로젝트에서 React만을 이용해서 채팅 서비스를 구현했다. 처음에는 상태 관리가 그렇게 많이 필요할까 했는데 메인 채팅창을 구현해보고 나니 앱 전체에 20개 가까이 되는 상태가 발생했고, 형제 컴포넌트들에 영향을 주는 경우...

dahyeyudev

1. 액션 타입 만들기 > 2. 각 액션 타입을 위한 액션 생성 함수 만들기 > 3. 리듀서 만들기 (액션타입마다 액션 들어오면 어떻게 변화를 일으킬지 정의해줌) > 4. createStore()로 스토어 만들기 createStore(Reducer함수) 넣어준다. > 5. 스토어에 변화가 생길 때 마다 실행 시킬 리스너 함수를 만들고 store.subsc...

zkqkzl2

리덕스 준비하기 리덕스를 사용할 때 가장 많이 사용하는 패턴은 프레젠테이셔널 컴포넌트와 컨테이너 컴포넌트를 분리하는 것이다. 여기서 프레젠테이셔널 컴포넌트란 주로 상태 관리가 이루어지지 않고, 그저 props를 받아와서 화면에 보여주기만 하는 컴포넌트를 말한다. 컨테이너 컴포넌트는 리덕스와 연동도어 있는 컴포넌트로, 리덕스로부터 상태를 받아 오기도 하고 리...

naseriansuzie

Today What I Learned Javascript를 배우고 있습니다. 매일 배운 것을 이해한만큼 정리해봅니다. 이번 주에 배운 내용 대방출 중입니다... * 1. URL Shortening Client Service Review 1. URL 축소 클라이언트 리뷰 - 이번 스프린트에서는 URL을 축소하는 bit.ly 유사 서비스를 구...

susu1991

미들웨어를 사용하는 이유 리덕스에서 리듀서는 순수함수여야 하는 규칙이 있습니다. 지키지 않는다고 오류가 나는 것은 아니지만, state가 동일한지 여부를 따져서 리덕스가 동작하기 때문에 state를 만드는 리듀서 자체에 같은 인풋에 따른 같은 아웃풋 값을 보장할 수 없다면 불필요한 연산이 실행될 수 있습니다. 따라서 리듀서를 순수함수로 남겨두기 위해 red...

susu1991

리듀서까지 만들었다면 이제 붙여서 확인해볼 수 있는 준비는 완료된 것입니다. 하나씩 해보도록 합시다 >_< 잠깐, next.js를 사용하신다면.. 현재 next.js로 프로젝트를 만들면서 블로그 작성중이라 next.js에 대한 내용이 추가되네요. 이 시리즈에서 next.js를 사용하신다면 추가로 설치해야 할 게 있습니다. reducer 합치기. 보통 하...

aaronddy

'Redux'는 애플리케이션(application)의 'state'를 관리하는 자바스크립트의 오픈소스 라이브러리로, 유저 인터페이스(user interfaces)를 만들기 위해 보통 'React', 'Angular'와 함께 쓰인다. Q. 'context API'를 쓰는 것과 무슨 차이가 있을까? '미들웨어'를 이용할 수 있다 특정 조건에 따라 액션이 무...

bclef25

redux .1 제가 만들고 있는 포트폴리오 페이지에 다크모드를 만드는 것으로 리덕스를 사용해 보겠습니다. 물론 작은 프로젝트라서 필요하다고 할수는 없지만 그래도 리덕스의 장점을 보여줄수 있는 예라고 생각합니다. 글로벌로 스테이트를 관리하고 어떤 컴포넌트에서든지 그 스테이트의 상태를 받아 상황에 맞게 랜더링을 해줄 수 있습니다. store const st...

bigbrothershin

1. 개요 스토어 안에는, 현재의 앱 상태와, 리듀서가 들어가있고, 추가적으로 몇가지 내장 함수들이 있습니다. 디스패치 (dispatch) store.dispatch(action) * 디스패치는 액션을 발생 시키는 것 이라고 이해하시면 됩니다. * dispatch 라는 함수에는 액션을 파라미터로 전달합니다. 그렇게 호출을 하면, 스토어는 리듀서 ...

bigbrothershin

1. 개념 redux-thunk는 리덕스에서 비동기 작업을 처리 할 때 가장 많이 사용하는 미들웨어입니다. 이 미들웨어를 사용하면 액션 객체가 아닌 함수를 디스패치 할 수 있습니다. > 함수를 디스패치 할 때에는, 해당 함수에서 dispatch 와 getState 를 파라미터로 받아와주어야 합니다. 이 함수를 만들어주는 함수를 우리는 thunk 라고 부릅니...

jayden

리덕스 개발자 도구를 사용하면 스토어의 상태를 크롬 개발자도구에서 조회 할수있다. 또한 어떤 액션들이 디스패치되었는지와 액션에 따라 상태가 어떻게 변했는지 추적할수있다. 프로젝트에 적용하기 크롬 웹스토어 확장프로그램 설치 https://chrome.google.com/webstore/detail/redux-devtools/lmhkpmbekcpmknklio...

jayden

Store 첫번째 포스팅에서 하나의 앱에는 하나의 스토어가 있다.라고 했다. 스토어는 하나의 저장소를 일컫는데 스토어에는 현재의 상태와 리듀서 그리고 내장 함수들이 있다. 리덕스 확실히 알고넘어가기 리덕스 순서.jpg Action 스토어에 있는 상태값을 변경 시켜주기 위해서는 리듀서에 신호를 보내야하는데 그걸 액션이라고 한다. 액션은 객체인데 type을...

jayden

1. Modules이란? 리덕스 모듈에는 액션타입, 액션 생성함수, 리듀서가 있다. 리덕스의 github repositories의 코드를 보면 아래와 같이 코드가 분리되어 있다. 위의 코드는 액션과 리듀서가 다른 파일에 정의되어있는데 나는 Ducks 패턴으로 공부를 했다. 2. Module 만들어 보기 src/modules/test.js useRedu...

jayden

1. 하나의 App에는 하나의 Store만 있다. 하나의 App에 하나의 Store를 만들어서 사용한다. 여러개의 store를 사용하는것은 권장되지 않는다고 한다. 2. 상태는 읽기전용 이다. 리액트에서는 state의 불변성을 유지하는게 중요하다. 물론 리덕스에서도 마찬가지이다. 기존의 상태를 건들이지 않고 새로운 상태를 생성해서 업데이트 해주는 방식으로...