Redux관련 기본적인 튜토리얼은 어렵지 않고 많은 자료를 많은 개발자들이 많이 올려주는 것 같습니다. 대신 Redux Recipe라는 Document가 공식 사이트에 있고 좋은 내용이 많아서 번역해서 기록해두겠습니다. https://redux.js.org/recipes/recipe-index 실제 어플리케이션에서 Redux를 가지고 만들 수 있는 좋은...

완성된 소스코드 : https://github.com/leaveittogod0123/ReactLab/tree/master/Contact 이전 작업들은 redux를 써보기 위해서 틀을 구성한 것입니다. 현재 컴포넌트를 나열해보면 * Contact - 연락처 데이터를 갖고 있으며 아래 세 개의 컴포넌트에게 props를 전달하는 Smart Component...

Intro action이 발생하여 dispatch가 되면 그 다음은 reducer가 실행되겠죠. dispatch는 UI와 연결하여 실행되어야 하니 먼저 reducer를 작성해 봅시다. Init state 리듀서는 초기 state값과 action을 받아서 새로운 state를 반환하므로, 먼저 init state를 작성합니다. 여기서의 CounterAc...

Intro Flux Pattern에서 모든 것의 시작은 action이었습니다. action부터 시작해봅시다. Action Action. 새로운 반응이 생겼습니다. 어떤 반응인지를 정의하는 type 필드를 포함하여 필요하면 데이터까지 같이 담아 보냅니다.

Intro 계속해서 리덕스가 익숙해지지 않고 머릿속에 흐름이 잘 그려지지가 않아 이번 포스팅으로 정리하기로 결심했습니다. 잘 기억이 나지 않는 하나의 큰 이유는 동작 원리를 제대로 숙지하지 못한 탓인 것 같습니다. 리덕스 포스팅 글들을 보면, 사전개념이라는 카테고리로 항상 action, store 등등을 사전적인 정의처럼 맥락없이 설명하는데, 저는 이번에...

👉 Redux A predictable state container for Javascript apps 상태관리 라이브러리. 리덕스를 사용하면, 여러분이 만들게 될 컴포넌트들의 상태 관련 로직들을 다른 파일들로 분리시켜서 더욱 효율적으로 관리 할 수 있다. 또한, 컴포넌트끼리 상태를 공유하게 될 때 여러 컴포넌트를 거치지 않고도 손쉽게 상태 값을 전달...

이번엔 기존의 프로젝트에 Redux를 추가하고, Reducer를 생성해보겠습니다. 일단은 추가만 하는 것이므로 크게 복잡하지 않습니다 :)

이 예제는 Beyond Create React App: React Router, Redux Saga, and More 를 참고하여 만들었습니다. - React Router, Redux-saga, Auth0 ... 등을 이용한 예제입니다. 1. React SPA 구축...

사용자 인증 Firebase Authentication 에서 테스트용 사용자를 추가한다. image.png 사용사 인증 action을 생성할 authActions.js 파일을 작성 store/ authActions.js image.png...

Redux 연동 redux에 관련된 파일들을 작성할 store 폴더에 + reducers + actions 두 가지 하위 폴더를 만들어 준다. Reducers reducers 폴더에는 아래와 같은 파일을 생성한다. - projectReducer.js // 프로젝트를 생성하는 리듀서 - authReducer.js // 로그인 인증 리듀서 - ...

Modal & 읽기, 수정기능 구현

모듈 설치 create-react-app 으로 프로젝트를 셋팅하고 scss로 기본적인 컴포넌트 디자인과 react-router-dom을 사용해서 컴포넌트 링크를 연결시켜준 상태이다. redux를 사용해서 포스팅의 추가, 읽기, 수정, 삭제 기능을 구현하려고 한다. 필요한 모듈을 먼저 설치해준다. `yarn add redux react-redux red...

https://redux.js.org/advanced/middleware

Presentational Component + 상태를 갖지 않으며 부모로부터 props을 통해 데이터를 전달받아서 사용한다. 오로지 시각적인 부분만 담당한다. 이벤트 핸들러를 등록하는 정도의 기능을 갖추고 있다. 예외적으로 아주 약간의 상태를 가질 수도 있다. + Styled Components는 모두 Presentaional Component이다. ...

Redux는 Javascript에서 흔히 쓰이는 State Container이다. React뿐만 아니라 어떠한 Javascript 라이브러리와도 연결할 수 있는 State 관리 라이브러리이다. 어플리케이션에 컨테이너에서 데이터와 비지니스로 로직을 분리하여 리액트가 순전히뷰에만 관여할 수 있게해준다. 리덕스는 잠재적으로 React대신 다른 뷰 라이브러리로...

React의 State는 읽기 전용이어야 한다. react에서 state는 항상 읽기 전용이어야 하며, array 등의 reference value들은 새로운 reference를 만들어서 state를 변경해 주어야 한다. 이와 같은 방식으로 redux에서도 state는 읽기 전용으로 관리 되어야 한다. 그래서 spread operator (...) 를 ...

Redux - 기본 개념 Redux의 3원칙 1. Single Source of Truth 아래에서 설명할 Flux와 다르게 Redux는 store를 단 1개만 사용합니다. 2. State is Read-only state를 직접 변경할 수 없고, 변경하려면 action이 dispatch되어야 합니다. 3. Changes are made wi...

이 글은 벨로퍼트님의 Redux (3) 리덕스를 리액트와 함께 사용하기 를 보고 작성한 글입니다. 이 글을 보시기 전에 리액트 기초을 보고오세요. 0. 배경...