React Redux

Redux는 주로 React와 함께 사용되는 상태 관리 라이브러리 이다. 

복잡한 애플리케이션에서 여러 컴포넌트 간에 데이터를 쉽게 관리할 수 있게 도와줍니다.

Redux는 애플리케이션의 모든 상태를 하나의 중앙 저장소에서 관리하고 상태 변화를 예측 가능하게 만들어줍니다.

 

설치 방법

npm	npm i redux react-redux @reduxjs/toolkit
yarn	yarn add redux react-redux @reduxjs/toolkit

 

Redux의 기본 개념

• state(상태) : 애플리케이션의 데이터가 저장되는 값(or변수)입니다.
• action(액션) : 액션은 애플리케이션에서 일어난 일을 설명하는 객체이고 보통 type 과 payload 로 구성됩니다.
  type 은 액션의 종류를 나타내는 문자열 , payload 는 액션을 처리하는 데 필요한 추가 데이터
• reducer(리듀서) : 리듀서는 현재 상태와 액션을 받아서 새로운 상태를 반환하는 함수입니다. 상태 변화를 처리하는 로직을 담고 있으며 순수 함수로 작성되야 합니다.
• store(스토어) : 스토어는 애플리케이션의 상태를 담고 있는 객체입니다. 스토어는 createStore() 또는 ReduxTookit의 configureStore()로 생성되며, 애플리케이션에서 발생하는 모든 상태 변화를 추적하고 관리합니다. 
• dispatch(디스패치) : 액션을 스토어에 보내는 함수입니다. dispatch(action) 을 호출하면 리듀서가 호출되고 액션에 따라 상태가 업데이트 됩니다.
• Selector(셀렉터) : 스토어에서 특정 상태를 선택하는 함수 입니다. useSelector() 훅을 사용하면 컴포넌트에서 필요한 상태만 선택해서 사용할 수 있습니다.

---

간단한 예시 코드 (Redux 연결)

폴더 구조

---

 

 

1. todoListStore.jsx 파일

• createSlice() : Redux Toolkit에서 제공하는 함수로, 리듀서와 액션을 한 번에 정의할 수 있습니다. 이 코드에서 createSlice를 통해 todos 라는 name의 slice를 생성하고있고 초기 상태는 빈 배열(initialState : [])로 설정 하고 있습니다.
  • addTodo : 새로운 할일을 추가하는 리듀서. state.push(action.payload) 를 통해 새로운 항목을 배열에 추가합니다.
  • toggleTodo : 전달된 값에 해당하는 항목을 배열에서 찾아 그 항목의 상태가 true일 때 false로, false일 때 true로 바꾸는 역할을 합니다.
  • removeTodo : 할 일을 삭제하는 리듀서. state.filter() 를 사용해 해당 ID와 일치하지 않는 항목만 남겨서 삭제를 구현합니다.
• export const { addTodo, toggleTodo, removeTodo } = todoListSlice.actions
  • todoListSlice 의 액션 함수들을 외부에서 사용할수 있도록 내보냅니다.
• export default todoListSlice.reducer
  • todoListSlice 에서 정의된 리듀서를 Redux 스토어에서 사용할 수 있도록 기본 내보내기로 설정합니다.

 

---

 

 

2. store.jsx 파일

• configureStore() : Redux Toolkit의 configureStore() 함수는 스토어를 설정하는 데 사용합니다.
  여러 slice(todos,counter,position) 를 리듀서로 등록하여 상태를 관리합니다.

Redux의 중앙 저장소 역할을 하고 애플리케이션 전체에서 상태를 공유할 수 있게 합니다.

 

---

 

 

3. TodoList.jsx 파일

• Todo를 구현한 React 컴포넌트 입니다.
  • useSelector : Redux 스토어에서 현재 todos 상태를 선택합니다.
  • useDispatch : 액션을 스토어에 디스패치하기 위해 사용하는 함수
  • handleSubmit : 사용자가 새로운 할 일을 입력하고 제출했을 때 addTodo 액션을 디스패치 하는 함수입니다.
  • 버튼은 각각 toggleTodo , removeTodo 액션을 디스패치하여 할일의 완료 상태를 토글하거나 삭제하는 기능을 합니다.

---

Redux 사용의 간단한 전체적인 흐름

1. 사용자가 버튼을 누르거나 입력을 하면 -> 컴포넌트에서 액션을 디스패치 합니다. 예로 할 일을 추가할 때 addTodo 액션을 디스패치 합니다. 

#dispatch = 액션을 스토어에 보내는 행위

2. 액션이 스토어에 전달되면 -> slice 파일의 리듀서가 실행되어 해당 액션을 처리하고 state를 업데이트 합니다.

3. 업데이트된 상태는 스토어에 저장되고 -> 컴포넌트에서 useSelector를 사용해 업데이트된 state를 가져옵니다.

4. 컴포넌트는 상태에 따라 UI를 다시 렌더링 합니다.