전체태그 보기

#redux (35개의 포스트)

jihoson94

Redux Recipe 번역

6일 전0개의 댓글
Redux관련 기본적인 튜토리얼은 어렵지 않고 많은 자료를 많은 개발자들이 많이 올려주는 것 같습니다. 대신 Redux Recipe라는 Document가 공식 사이트에 있고 좋은 내용이 많아서 번역해서 기록해두겠습니다. https://redux.js.org/recipes/recipe-index 실제 어플리케이션에서 Redux를 가지고 만들 수 있는 좋은...
noyo0123
완성된 소스코드 : https://github.com/leaveittogod0123/ReactLab/tree/master/Contact 이전 작업들은 redux를 써보기 위해서 틀을 구성한 것입니다. 현재 컴포넌트를 나열해보면 * Contact - 연락처 데이터를 갖고 있으며 아래 세 개의 컴포넌트에게 props를 전달하는 Smart Component...
susu1991

reducer

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

Type과 Action

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

리덕스의 동작원리

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

[TIL] Redux

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

TIL - 191030 - #3. Redux, Reducer Test

2019년 10월 30일0개의 댓글
이번엔 기존의 프로젝트에 Redux를 추가하고, Reducer를 생성해보겠습니다. 일단은 추가만 하는 것이므로 크게 복잡하지 않습니다 :)
fepanbr
이 예제는 Beyond Create React App: React Router, Redux Saga, and More 를 참고하여 만들었습니다. - React Router, Redux-saga, Auth0 ... 등을 이용한 예제입니다. 1. React SPA 구축...
smooth97
사용자 인증 Firebase Authentication 에서 테스트용 사용자를 추가한다. image.png 사용사 인증 action을 생성할 authActions.js 파일을 작성 store/ authActions.js image.png...
smooth97
Redux 연동 redux에 관련된 파일들을 작성할 store 폴더에 + reducers + actions 두 가지 하위 폴더를 만들어 준다. Reducers reducers 폴더에는 아래와 같은 파일을 생성한다. - projectReducer.js // 프로젝트를 생성하는 리듀서 - authReducer.js // 로그인 인증 리듀서 - ...
smooth97
Modal & 읽기, 수정기능 구현
smooth97
모듈 설치 create-react-app 으로 프로젝트를 셋팅하고 scss로 기본적인 컴포넌트 디자인과 react-router-dom을 사용해서 컴포넌트 링크를 연결시켜준 상태이다. redux를 사용해서 포스팅의 추가, 읽기, 수정, 삭제 기능을 구현하려고 한다. 필요한 모듈을 먼저 설치해준다. `yarn add redux react-redux red...
TypeScript 환경에서 Redux를 프로처럼 사용하기
velopert
이번에 준비한 튜토리얼에서는 TypeScript 환경에서 Redux를 프로처럼 사용하는 방법을 다뤄보도록 하겠습니다. 왜 제목이 "프로처럼"이냐! 사실은 조금 주관적입니다. 이 튜토리얼에서는 지금까지 제가 다양한 TypeScript/Redux 관련 코드를 읽고, 작성해오면서 그 중에서 제가 맘에 들었던 구조를 소개시켜드리겠습니다. 그런데 프로처럼 사용해...
smooth97

[ Redux ] - Middleware

2019년 9월 8일0개의 댓글
https://redux.js.org/advanced/middleware
smooth97
Presentational Component + 상태를 갖지 않으며 부모로부터 props을 통해 데이터를 전달받아서 사용한다. 오로지 시각적인 부분만 담당한다. 이벤트 핸들러를 등록하는 정도의 기능을 갖추고 있다. 예외적으로 아주 약간의 상태를 가질 수도 있다. + Styled Components는 모두 Presentaional Component이다. ...
smooth97

[ Redux ]

2019년 9월 7일0개의 댓글
Redux는 Javascript에서 흔히 쓰이는 State Container이다. React뿐만 아니라 어떠한 Javascript 라이브러리와도 연결할 수 있는 State 관리 라이브러리이다. 어플리케이션에 컨테이너에서 데이터와 비지니스로 로직을 분리하여 리액트가 순전히뷰에만 관여할 수 있게해준다. 리덕스는 잠재적으로 React대신 다른 뷰 라이브러리로...
cyranocoding
React의 State는 읽기 전용이어야 한다. react에서 state는 항상 읽기 전용이어야 하며, array 등의 reference value들은 새로운 reference를 만들어서 state를 변경해 주어야 한다. 이와 같은 방식으로 redux에서도 state는 읽기 전용으로 관리 되어야 한다. 그래서 spread operator (...) 를 ...
geonhwi

IMMERSIVE #17 - Redux

2019년 8월 28일0개의 댓글
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...
[번역] GraphQL은 어떻게 Redux를 대체하는가
minsangk
최근 프론트엔드를 Angular로 전면 교체하면서 상태 관리 코드에 관한 고민이 많은 차에 많은 영감을 주는 좋은 글을 발견하여 (처음으로, 제대로) Mark Johnson님의 허락을 얻어 모자란 실력이나마 번역을 해봤습니다. 이에 관한 제 생각과 경험이 더 있는데 그 글은 따로 포스트를 작성하도록 하겠습니다ㅋ How GraphQL Replaces...
nibble

React + Redux로 Counter 만들기

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