# redux
[Redux] Redux란?
리덕스가 무엇인지 알아보기 전에 Redux가 필요한 이유부터 알아보자. (최상위노드) A-B-C-D (최하위노드) 컴포넌트가 있다고 생각해보자. 특정 props를 A 컴포넌트에서 D 컴포넌트로 전달해야 할 때, 항상 B-C를 거쳐서 전달한다면 매우 비효율적일 것이다.
[React 토이프로젝트] Redux, Redux dev tool 설치하기
redux 설치npm install @reduxjs/toolkitReact 에 Redux 설치하기! (feat.왜 React에 Redux를 사용할까?)상태관리에 사용성능최적화react는 상태가 바뀔 때마다 컴포넌트가 업데이트됨상태가 바뀔 때마다 재렌더링redux를 사용
Redux [전역 상태 관리]
즉 , Redux에서는 Action -> Dispatch -> Reducer -> Store 순서로 데이터가 단방향으로 흐른다.Provider는 store를 손쉽게 사용할 수 있게 하는 컴포넌트이다.Reducer는 Dispatch에게서 전달받은 Action 객체의 ty
React:Redux-useDispatch, useSelector
useDispatch(), useSelector(): 리덕스를 함수형 컴포넌트에서 사용하기 위한 방법<span style="background-color: : useSelector 는 Redux Store 로 부터 state 를 가져올 때 사용한다.<span
React:Redux기초
Redux의 핵심 5가지➡️ <span style="background-color:먼저, Redux 패키지를 설치해주자리덕스 패키지를 설치하면 이제부터 리덕스에서 createStore 라는 함수를 사용할 수 있다.createStore: 데이터를 넣어주는 저장소의
[프론트]리덕스를 활용한 스크랩 기능 구현
app 폴더 > store.jsfeatures 폴더 > scrapSlice.jsposts배열에 스크랩할 게시글을 저장해놓는다addScrap action은 해당 게시글의 정보들을 posts배열에 push 매소드를 활용하여 추가시킨다removeScrap action은 해당
Redux 배워보기
Redux를 사용할 때는 액션 타입, 액션 생성 함수, 리듀서 코드를 작성해야 하는데, 이 코드들을 각각 다른 파일에 작성하는 방법도 있고, 기능별로 묶어서 파일 하나에 작성하는 방법도 있다./actionscounter.jstodos.js/constantsActionT
Create-react-app + Typescript + Redux 설치하기
npx 명령어로 리액트 프로젝트 + 타입스크립트 + 리덕스 개발환경을 한번에 세팅해 보도록 하겠습니다. https://www.npmjs.com/package/cra-template-redux-typescript $npx create-react-app travel-r
[프론트]로그인 상태 유지 redux-persist
로그인 후 통신 응답으로 받은 사용자 정보를 다른 컴포넌트에서 활용할 수 있게 리덕스를 사용한다.features 폴더 > userSlice.jsapp 폴더 > store.js로그인 컴포넌트로그인할 때 유저 정보를 dispatch하여 저장해준다다른 컴포넌트useSelec
03-17 코딩일기
ㅡ^ 까지가 단계별로 나누어 본 redux 사용법계속하여 redux 미들웨어 사용법도 올려보도록 하겠다.공부는 미리 하고 복습하고 .. 까먹지말자 ㅠㅠ 🌩️
Redux Toolkit - useDispatch로 state rasie하기
이전 포스팅에서 Redux toolkit으로 store를 셋팅을 했다면, 실제로 이제 각 컴포넌트에서 수행할 리듀서 함수를 import하여 사용하는 방법에 대해서 알아보도록 하겠습니다. 해당 포스팅에서 todoList App의 핵심적인 기능인 할일을 추가 하는 기능을
React-13 Redux-persist (23/03/16)
1. Redux-persist 사용법 > 개발 환경은 노드JS, 코드 실행은 브라우저, 상태 유지는 로컬 스토리지 Redux-persist는 리덕스 스토어의 상태를 지속적으로 유지하기 위한 라이브러리입니다 설치 라이브러리 사용을 위해 Store를 수정합니다 애
React-12 Redux-Thunk (23/03/15)
Redux & Redux-Thunk 1. 리액트 초기세팅 오늘 필요한 패키지들입니다 설치 간단한 백엔드 설정부터 먼저 하고 시작하겠습니다 Backend 백엔드는 CORS 처리에 특히 주의! [./server/server.js] 리액트 프로젝트 시작은 항상
React-11 Redux (23/03/13)
Redux 지금까지 Context API를 사용하여 전역상태를 관리하는 방법에 대해 알아봤습니다 우리는 왜 Redux를 사용할까요? 하나의 리퀘스트에는 여러가지 상태바꿈이 들어갈 가능성이 높습니다 Redux를 사용하면 애플리케이션 전체의 상태를 집중적으로 관리할
[React] 오류 기록
createStore과 configureStore createStore은 문제 없이 작동하지만 @reduxjs/toolkit에서 제공하는 configureStore을 권장한다. Redux Toolkit 공식문서 ConfigureStore는 reducer에서 반환된