# react redux

143개의 포스트
post-thumbnail

Redux

react의 컴포넌트 구조는 상위 컴포넌트와 하위 컴포넌트의 상호작용이 가능하다. 하지만 컴포넌트에서 제공하는 상호작용 방식으로는 여러 계층을 가진 컴포넌트간 상호작용은 복잡한 단계를 거쳐야 한다. 이러한 한계를 극복하기 위해서 Redux 가 만들어지게 됐다. Redux 설치 react 에서 redux를 사용할 수 있게 도와주는 react-redux 설치 Redux 구성 요소 action type 과 reducer 에서 state를 변경하는데 사용할 데이터를 갖고 있다. reducer에 사용되는 매개변수라 생각하면 쉽다. reducer state를 변경하는 로직이 구현되는 곳 reducer 함수의 매개변수로 현재 state 데이터와 action 데이터를 받는다. 여기서 state는 현재값을 의미하고 action은 새로운 state를 만들기 위한 데이터를 포함한 객체이다. reudcer는 action의 타입을 확인하고 action

3일 전
·
0개의 댓글
·

React Redux

리덕스가 뭘까 리액트는 부모 자식 관계의 컴포넌트끼리 props를 주고 받을 수 있다. 그렇다면 먼 조상이나 형제, 친척 관계의 컴포넌트도 props를 주고 받을 수 있을까? 있지만 복잡하고 비효율적이다. 이때 생각할 수 있는 방법은 모든 컴포넌트가 소통할 수 있는 공동의 창고를 만들고 정보를 주고 받는 것이다. 이것이 리덕스의 개념이다. > 프로젝트에서 사용했던 리덕스 내가 참여했던 프로젝트에서는 redux-toolkit 라이브러리를 사용하였다. 스토어 정의 (예시) configureStore을 통해 스토어 생성 (예시) 최상단에서 스토어 전달한다. (예시) 컴포넌트가 스토어로 정보 전달 컴포넌트가 스토어에서 정보 조회

2023년 9월 1일
·
0개의 댓글
·
post-thumbnail

react-redux 알기

전 포스팅에서 redux에 대한 작동방식을 알아보았고, 이번에는 react에서 redux를 사용하는 방법을 알아보자. > npm install redux react-redux 두 가지 패키지를 설치해 준다. 리액트용 리덕스 저장소 만들기 src파일 안에 store 폴더를 만들고 안에 index.js폴더를 만들어 그 안에 리덕스 로직을 넣어준다. 해보자. > import {createStore} from 'redux'; >저장소와 리듀서 함수를 만든다. 자바스크립트와 다른 점은 여기서 바로 구독과 액션을 하지 않고 리액트 앱과 연결 후 컴포넌트에서 디스패치 한다는 점이다. 이를 위해 스토어를 export한다. 이제 우리는 리덕스 저장소를 리액트 앱에 제공해야 하는데 여기서 제공한다는게 뭘까? 리액트 앱에 저장소를 제공 우리가 root컴포넌트를 렌더링한 index.js에서 react-redux에서 가져온 Provider컴포넌트를 import할 수 있다.

2023년 8월 31일
·
0개의 댓글
·
post-thumbnail

Redux in React.js 구현하기

Redux란? Redux는 자바스크립트 상태관리 라이브러리, props drilling issue를 해결하기 위해 React에서도 상태관리 react-redux 라이브러리를 사용합니다. Redux 원리 store: 모든 state를 가지고 있는 전역 저장소. state와 state 변경 메소드인 을 저장한다. state 변경 방법 : 실행 를 실행하는 메서드 : state 값 참조하는 메서드 : 위의 내용이 기본적인 React-Redux의 원리입니다. React-Redux를 실습해보자. <img src="https://velog.velcdn.com/images/hyerimkimm/post/ae4aafd2-4b6c-41cf-93d2-d3ff

2023년 7월 6일
·
0개의 댓글
·
post-thumbnail

[Redux] Redux-persist를 활용하여 로그인, 로그아웃 구현

로그인, 로그아웃을 구현하는 중 로그인 시에는 access token을 redux store에 저장하여 전역상태로 관리하고 로그아웃 시에는 저장되어있는 access token을 null로 변경하기 위한 작업이 필요했습니다. refresh token은 http only 옵션으로 프론트에서 직접 관리할 수 없고, axios interceptor를 활용하여 통신시 request에 access token을 항상 전달하고 response로 refresh token으로 인해 갱신되는 access token을 다시 redux store에 저장하는 작업을 진행했습니다. 우선, redux store에 상태를 저장하고 새로고침을 한다면 저장된 상태는 사라지게 되나 새로고침을 해도 저장된 상태를 사라지지 않기 위해서는 redux-persist 라이브러리가 필요합니다. redux-persist 사용법? [redux-

2023년 5월 21일
·
0개의 댓글
·
post-thumbnail

[React] Thunk

미들웨어란? 소프트웨어에서 어떤 작업을 수행하기 전과 후에 발생하는 이벤트를 가로채는 소프트웨어 컴포넌트. 이를 통해 여러 가지 작업을 수행할 수 있음. 리덕스 미들웨어 https://react.vlpt.us/redux-middleware/ 리덕스에서의 미들웨어는 Action과 Reducer 사이에서 동작함. 액션 객체를 가로채서 추가 작업을 수행할 수 있음. 이를 통해 비동기 작업 처리, 로깅, 에러 처리 등의 추가 작업을 쉽게 구현할 수 있음. thunk란? 리덕스에서 많이 사용하는 미들웨어 중 하나. thunk를 사용하면 d

2023년 5월 14일
·
0개의 댓글
·
post-thumbnail

[React] Redux-toolkit

리덕스 툴킷이란? 리덕스를 사용하기 위해 작성했던 ducks 패턴의 요소들이 전체적인 코드량을 늘린다는 불편함에 등장함. 리덕스를 더 편하게 쓰기 위한 기능들을 흡수하고 코드량은 적게 만듦. 그러나 새로운 것은 아님. 리덕스 구조나 패러다임은 동일. 바뀐 부분은 모듈 파일 뿐임. 설치 기존 리덕스 코드와 비교 일반 리덕스 - count 툴킷 큰 차이점은 Action Value와 Action Creator를 직접 생성해주지 않고 Action Value, Action Creator, Reducer가 하나로 합

2023년 5월 13일
·
0개의 댓글
·
post-thumbnail

[React] Action Creator

Action Creator란? 액션 객체의 value를 변경할 일이 생긴다면? 프로젝트 규모가 커진다면 일일이 변경이 힘들어짐. Action Creator 만들기. 액션 객체를 한 곳에서 관리할 수 있도록 “함수”와 액션 value를 상수로 만들어 줌. Action Creator. 해석 그대로 액션을 만드는 생성자. 모듈에 initialState와 리듀서 밖에 없었지만 액션의 value와 Action Creator가 추가됨. 사용하기 1. export된 Action Creator import 하기. 2. dispatch()에 있던 액션 객체를 지우고 Action Creator 넣기.

2023년 5월 13일
·
0개의 댓글
·
post-thumbnail

[React] 리덕스의 흐름

리덕스의 주요 개념 store : 스토어는 애플리케이션의 전체 상태를 관리하는 단 하나의 객체임. 변경할 없으며 getState() 메서드를 통해 액세스할 수 있음. state를 변경하려면 스토어에 액션을 디스패치를 통해 보내야 함. action : 액션은 state에 적용해야하는 변경 사항을 설명하는 객체임. 액션에는 작업을 정의하는 유형 속성(프롭스)과 작업과 관련된 데이터가 포함된 페이로드가 포함됨. (디스패치의 파라미터로 전달됨) reducer : 리듀서는 현재 state와 action을 parameter로 받아 새로운 상태를 반환하는 순수 함수임. 작어벵 따라 state를 업데이트하는 역할을 함. dispatch : 디스패치는 state를 업데이

2023년 5월 13일
·
0개의 댓글
·
post-thumbnail

[React] modules

modules 폴더에 counter.js 생성 initialState === 초기 상태값. useState 사용 시 괄호 안 초기 값을 지정해주 던 것과 같음. 위 state에서 만든 초기 값은 객체이고 그 안에 number라는 변수에 초기값 0 을 할당해준 것. 초기값은 배열, 원시데이터 등도 올 수 있고, 객체에도 여러 개의 변수를 넣어줄 수 있음. Reducer === 변화를 일으키는 함수. useState 사용 시 number라는 값을 바꾸고 싶으면 setNumber를 사용했음. 리덕스에서는 리듀서가 이 역할을 함. 리듀서 인자 첫 번째 자리에는 s

2023년 5월 13일
·
0개의 댓글
·
post-thumbnail

[React] 리액트에서 리덕스 사용하기

2개의 패키지 설치. 폴더 구조 redux : 리덕스 관련 코드를 모아 놓을 폴더 config : 리덕스 설정과 관련된 파일들을 놓을 폴더 configStore : store를 만드는 설정 코드들이 있는 파일 modules : state들을 모아 놓을 폴더 초기 설정 configStore.js index.js

2023년 5월 13일
·
0개의 댓글
·
post-thumbnail

[React] 리덕스란?

리덕스란? 자바스크립트의 상태 관리 라이브러리. useState를 통해 상태를 관리했을 때 발생하는 불편함을 일부 해소시켜 줌. 중앙 state 관리소를 가지고 있으며, 모든 state는 이 곳에서 생성됨. 리덕스가 필요한 이유 useState의 불편함. 컴포넌트 간 State를 보내기 위해서는 반드시 부-모 관계여야 함. 조부모 컴포넌트에서 손자 컴포넌트로 값을 보내고자 할 때도 반드시 부모 컴포넌트를

2023년 5월 13일
·
0개의 댓글
·
post-thumbnail

Redux Toolkit

서론 이 전에 작성 된 글을 이어서 이번엔 Redux Toolkit을 사용하여 코드를 다듬어보려고 합니다. 먼저 RTK라고도 불리는 Redux Toolkit에 대해 간략하게 알아보고 바로 코드를 수정해보겠습니다! > 이 글은 노마드코더의 Redux 강의를 보고 학습하며 다시 정리한 내용입니다. Redux Toolkit (RTK) Redux Toolkit은 Redux 구성 작업을 단순화하고, 실수를 방지하며, 쉽게 사용할 수 있도록 하기위해 만들어진 도구입니다. Redux에 대해 우려하는 세 가지를 해결하기 위해 만들어졌다고 합니다. 저장소를 설정하는 것이 복잡하다. 쓸만하게 만들려면 많은 패키지들의 설치가 필요하다. 보일러플레이트 코드들을 너무 많이 필요로 한다. 이러한 문제를 해결하기 위해 만든 RTK는 Redux에서 강력하게 권장한다고 합니다. 이 도구로 인해 코드를 더 좋게 유지보수하기 쉽게 만들어준다고 하네요. 설

2023년 4월 11일
·
0개의 댓글
·
post-thumbnail

Redux를 사용해보자

서론 이 전 글에서 Redux에 대해 전반적으로 알아보았으니 이번 글에서는 한 번 직접 코드를 작성해보면서 알아보겠습니다. >이 글의 코드는 노마드코더의 Redux 강의를 보고 학습하며 정리하였습니다. 리덕스를 활용한 ToDo 구현 React환경에서 ToDo 기능을 만들면서 리덕스를 어떤식으로 활용할 수 있는지에 대해 코드로 배워보도록 하겠습니다. 간편하게 CRA를 활용하여 리액트 프로젝트를 시작하고, Redux를 설치합니다. CRA Redux 설치 만약 react-redux 먼저 설치 후 redux를 설치하게 되면 간혹 문제가 생겼다는 글이 있어서 최대한 redux -> ract-redux 순서로 진행해주세요. 설치가 모두 완료되었으면 코드를 작성해보도록 하겠습니다. store.js 리덕스 내부의 상태를 업데이트 할 때 절대 state를 직접적으로 변경하려하면 안됩니다. 위의 코드처럼 배열의 경우엔 새로운 배열로 반환하여 교체해야

2023년 4월 11일
·
0개의 댓글
·
post-thumbnail

Redux - 상태 관리 라이브러리

서론 이전 회사에서 상태 관리 라이브러리로Recoil을 사용했었습니다. 깊게 사용하기보단 주로 전역 변수의 상태 관리를 위해 사용하였었는데 그 때 Redux가 아닌 Recoil을 사용했던 이유는 좀 더 사용방법이 간단하고, 단기간에 학습하여 적용하기가 쉽다는 점 때문이었죠. 그렇게 Recoil을 사용하였지만, Redux에 대한 궁금증이 계속 있었기에 한 번 학습해보면서 내용을 정리해보기로 하였습니다. 상태 관리 라이브러리를 사용하는 이유? React에서 우리가 컴포넌트들을 작성하다보면 부모-자식 간에 props를 주고 받을 때가 있습니다. 이 props는 프로젝트가 커질수록 컴포넌트의 계단이 많아지고, 컴포넌트 간의 props를 전달하는 동작이 늘어나게 됩니다. props가 수많은 계단을 거치면서 불필요한 리렌더링을 일으키고, 코드의 가독성을 떨어뜨려 유지보수에 어려움이 발생할 수 있습니다. Props Drilling ![](https://v

2023년 4월 11일
·
0개의 댓글
·
post-thumbnail

03-17 코딩일기

** > &nbsp;기본개념 이해를 위해 Redux 공식문서 & 인터넷 강의 & 잘 만들어진 문서들을 통해 Redux의 생애주기를 파악하고 기본적인 문법을 먼저 보았다. 기본적인 redux 사용법 ㅡ^ 까지가 단계별로 나누어 본 redux 사용법 계속하여 redux 미들웨어 사용법도 올려보도록 하겠다. 공부는 미리 하고 복습하고 .. 까먹지말자 ㅠㅠ 🌩️ &nbsp;&nbsp;redux -> redux-tollkit -> recoil & mobx 등.. &nbsp; 다뤄보아야 할 상태관리

2023년 3월 17일
·
0개의 댓글
·
post-thumbnail

bindActionCreators 보다는 useDispatch를 사용하자

bindActionCreators 이름에서 알 수 있듯 Action Creators를 하나로 바인딩하는 기능을 제공한다. 서로 다른 리듀서의 Action Creators를 다음과 같이 하나로 바인딩 할 수 있다. useActions React-Redux에서는 useActions() 훅으로 이 기능을 제공했다. 하지만 이 기능은 React-Redux의 v7.1.0-alpha.4 부터 제거되었다. 그 이유는 다음과 같다. > This hook was in our original alpha release, but removed in v7.1.0-alpha.4, based on Dan Abramov's suggestion. That suggestion was based on "binding action crea

2023년 3월 5일
·
0개의 댓글
·
post-thumbnail

useSelector의 적절한 사용법

개요 부끄럽지만 최근까지 나는 react-redux의 useSelector를 다음과 같이 구조 분해 할당하여 사용해왔다. 이와 같이 스토어의 슬라이스를 전부 갖고 와서 그 중 필요한 값만 구조 분해 할당으로 빼왔다. 최근에 불필요한 리렌더링을 잡기 위해 데브툴을 켜놓고 만져보던 도중, 리렌더링이 전혀 발생하지 않아야 할 곳들이 반짝반짝하는걸 봤다. useSelector가 문제 될 줄은 전혀 모르고 삽질만 하다가, "혹시 ?" 하는 마음에 검색해봤다가 알게 되었다. useSelector + 구조 분해 할당 여러분은 지금까지 useSelector를 잘못 사용해왔습니다. <img src="https://velog.velcdn.com/images/arthur/post/25741e53-4b25-466e-8a3f-00b8d09f

2023년 3월 5일
·
0개의 댓글
·

2023-02-21(Redux-toolkit 사용이유, 모듈페이지의 나만의 해석)

✅✅리덕스 툴킷 사용 이유와 모듈페이지의 전부 @reduxjs/toolkit에서 createAsyncThunk와 createSlice를 가져와 axios를 사용하여 사용자 정의 API 파일에서 가져온다 "createAsyncThunk"는 비동기 thunk 액션 생성자를 생성하는 보조 함수입니다. Thunk를 사용하면 비동기 액션을 디스패치 할 수 있으며 그런 다음 디스패치 함수를 사용하여 다른 액션을 디스패치 할 수 있습니다. 이 코드는 fetchTodo, postTodo 및 __deleteTodo 세 가지 thunk를 정의한다. __fetchTodo는 서버에서 todo 목록을 검색하기 위해 API GET 요청을 수행. __postTodo는 서버의 목록에 새로운 todo 항목을 추가하기 위해 API POST 요청을 수행. __deleteTodo는 서버에서 todo 항목을 제거

2023년 2월 21일
·
0개의 댓글
·

2023-02-22(Todolist만들면서 오류,순서)

✅ 일단 리덕스 툴킷으로 청크를 이용할 때 순서를 먼저 파악하는 게 중요하다. 해당페이지에서 input의 인자를 받아 diapatch의 인자로 액션 객체가 되어 dispatch를 보내준다. dispatch로 보낸 payload가 reducer모듈의 미들웨어의 payload에 담긴다. 그 담긴 payload를 매개변수로 return을 시킨다(물론 잘 받아왔는지 콘솔로 확인) return을 시키면 createSlice라는 부분의 extraReducers 부분으로 들어가서 타입에 맞게 가공을 시킨다 가공이 끝났으면 store로 보낸다. store에 데이터(db)가 담겼으니 이제 이걸 각 컴포넌트가 필요할 때 가져다 쓰면 된다 ----->useSelector로 쓰면된다 -->map으로 뿌리던지 말던지~ ![](https://velog.velcdn.com/images/wnsgur1855/post/3f90ba29-46f8-4b86-8161-4c7d2df0

2023년 2월 21일
·
0개의 댓글
·