Redux

https://www.youtube.com/watch?v=QZcYz2NrDIs 

https://react-redux.js.org/api/hooks

Hooks | React Redux

 

 

 

Redux는 JavaScript 애플리케이션에서 상태(state)를 관리하기 위한 상태 관리 라이브러리입니다. Redux는 예측 가능한(stateful) 상태 컨테이너를 생성하며, 이를 통해 애플리케이션의 모든 상태를 하나의 객체로 관리할 수 있습니다. Redux는 React와 함께 사용할 수 있지만, 다른 라이브러리나 프레임워크에서도 사용할 수 있습니다.

 

Redux는 애플리케이션의 상태를 불변 객체(immutable object)로 관리합니다. 액션(action)은 애플리케이션에서 일어난 변화를 나타내며, 리듀서(reducer)는 이전 상태와 액션을 받아서 새로운 상태를 반환합니다. Redux의 작동 방식은 다음과 같습니다.

 

1. 액션(action)을 발생시킵니다.
   • 사용자가 클릭, 서버 응답 등의 이벤트가 발생하는 경우가 대표적입니다.
   • 액션은 일반적으로 객체로 표현되며, type 필드를 반드시 가지고 있어야 합니다.
2. 액션을 처리하기 위해 리듀서(reducer)를 호출합니다.
   • 리듀서는 이전 상태(state)와 액션(action)을 받아서 새로운 상태를 반환합니다.
   • 리듀서는 순수 함수(pure function)로 작성되어야 합니다.
3. 새로운 상태를 저장합니다.
   • 리듀서가 반환한 새로운 상태를 상태 컨테이너에 저장합니다.
   • 상태 컨테이너는 애플리케이션의 모든 상태를 하나의 객체로 관리합니다.
4. 상태가 변경되면 UI를 업데이트합니다.
   • React에서는 상태가 변경되면 다시 렌더링합니다.
   • 다른 라이브러리나 프레임워크에서는 상태 변경에 대한 이벤트를 처리하는 방식으로 UI를 업데이트합니다.

Redux는 상태 관리를 위해 필요한 기능을 모두 제공합니다. 액션, 리듀서, 상태 컨테이너 등을 직접 작성할 필요 없이 Redux를 사용하면 상태 관리를 쉽게 할 수 있습니다. 또한 Redux는 미들웨어(middleware)를 지원하여 비동기 작업을 처리할 수 있습니다. Redux의 미들웨어를 사용하면 API 호출, 로깅 등의 작업을 처리할 수 있습니다.

Redux는 React와 함께 사용할 때 가장 많이 사용됩니다. React에서는 Redux와 함께 사용하는 react-redux라는 라이브러리가 제공됩니다. 

 

동시성 처리를 위한 redux-saga나 비동기 처리를 위한 redux-thunk 등의 미들웨어도 있습니다. 이들 미들웨어를 사용하면 Redux로 비동기 처리를 보다 쉽게 구현할 수 있습니다.

Redux는 컴포넌트 간의 데이터 전달을 좀 더 효율적으로 처리하기 위해 사용되기도 합니다. Redux를 사용하면 컴포넌트들은 상태를 직접적으로 공유하지 않아도 됩니다. 대신 상태 컨테이너를 통해 상태를 관리하고, 액션을 통해 컴포넌트 간의 데이터 전달을 처리할 수 있습니다.

Redux는 복잡한 애플리케이션에서도 잘 작동합니다. Redux를 사용하면 상태 관리가 용이해지므로, 애플리케이션의 규모가 커질수록 상태 관리가 복잡해지는 문제를 해결할 수 있습니다.

하지만 Redux를 사용하면서도 반드시 유의해야 할 몇 가지 단점이 있습니다. Redux는 상태 관리를 위한 라이브러리이기 때문에 애플리케이션의 다른 부분과는 별개로 동작합니다. 이로 인해 Redux를 사용하면서 생기는 불필요한 코드의 양이 증가할 수 있습니다. 또한 Redux를 사용하면서 코드의 복잡도가 증가할 수 있습니다. 따라서 Redux를 사용할 때는 필요한 경우에만 사용하는 것이 좋습니다.

 

 

Redux를 사용하면 상태를 관리하기 위해 많은 양의 코드를 작성해야 합니다. 또한 Redux를 사용하는 것이 프로젝트의 초기 설정이 더 복잡해지는 단점이 있습니다. 이러한 이유로 Redux는 작은 규모의 프로젝트에서는 사용하지 않는 것이 좋습니다.

Redux를 사용할 때는 상태 변경을 위한 액션과 이를 처리하는 리듀서를 작성해야 합니다. 이를 위해 Redux에서는 일종의 디자인 패턴인 Flux 패턴을 따르고 있습니다. Flux 패턴은 데이터의 흐름을 단방향으로 유지함으로써 코드의 복잡도를 줄이고 유지보수를 용이하게 만듭니다.

Redux는 React와 함께 사용하기 위해 만들어진 라이브러리이기 때문에, React에서도 사용하기 쉽습니다. Redux를 React와 함께 사용할 때는 react-redux 라이브러리를 사용합니다. 이 라이브러리는 Redux를 React와 함께 사용하기 쉽게 만들어주며, Redux의 상태를 컴포넌트에 전달할 수 있도록 해줍니다.

Redux는 다른 상태 관리 라이브러리와 비교해 상대적으로 복잡한 구조를 가지고 있지만, 이를 사용함으로써 얻을 수 있는 이점은 많습니다. Redux를 사용하면 상태 관리가 효율적으로 이루어지므로, 애플리케이션의 유지보수와 확장성을 향상시킬 수 있습니다.

 

 

 

 

useSelector

• connect함수를 이용하지 않고 리덕스의 state를 조회할 수 있다.

useDispatch

• 생성한 action을 useDispatch를 통해 발생시킬 수 있다
• 만들어둔 액션생성 함수를 import한다.

 

useSelector와 useDispatch는 React에서 Redux를 사용할 때 유용하게 사용되는 hook입니다.

useSelector는 Redux 상태(state)를 읽어오는 역할을 합니다. 이 hook을 사용하면 Redux 상태를 컴포넌트에 전달할 수 있습니다. useSelector는 Redux 상태의 일부분만 가져올 수도 있습니다. 예를 들어, 전체 Redux 상태가 아니라 특정 객체의 속성만 가져올 수 있습니다. 이를 통해 컴포넌트가 필요로 하는 Redux 상태만 가져와서 불필요한 렌더링을 줄일 수 있습니다.

useDispatch는 Redux 액션을 발생시키는 역할을 합니다. 이 hook을 사용하면 컴포넌트에서 Redux 액션을 발생시킬 수 있습니다. useDispatch를 사용하면 Redux의 dispatch 함수를 가져와서 사용할 수 있습니다. 이를 통해 컴포넌트에서 Redux 액션을 쉽게 발생시킬 수 있습니다.

useSelector와 useDispatch는 Redux를 사용할 때 매우 유용한 기능입니다. 이 두 hook을 사용하면 Redux 상태를 컴포넌트에 쉽게 전달하고, 컴포넌트에서 Redux 액션을 쉽게 발생시킬 수 있습니다. 이를 통해 Redux를 사용한 상태 관리가 더욱 편리하고 효율적으로 이루어질 수 있습니다.

 

 

react-redux

yarn add react-redux 또는 npm install react-redux

• state를 조회하기 위한 useSelector를 사용할 수 있다.
• action을 발생시키기 위한 useDispatch를 사용할 수 있다.

 

 

 

 

DevTools에 관해서 action, state, diff, trace, test

Redux는 상태(state) 관리를 위해 액션(action)을 사용합니다. 액션은 어떤 변화(change)가 일어나야 할지 알려주는 객체입니다. 액션은 type이라는 필드를 가지고 있으며, 이 필드는 반드시 문자열(string) 형태로 지정되어야 합니다. 액션 객체는 불변(immutable)해야 하며, 추가적인 정보를 포함할 수 있습니다.

Redux에서는 액션 객체를 생성하는 함수를 액션 생성자(action creator)라고 부릅니다. 액션 생성자는 액션 객체를 반환하는 함수입니다. 이 함수는 반드시 type이라는 필드를 반환해야 합니다.

Redux는 상태(state)를 저장합니다. 상태는 애플리케이션에서 관리하는 모든 데이터를 포함합니다. Redux는 상태를 불변(immutable)하게 유지하며, 상태가 변할 때마다 새로운 상태 객체를 생성합니다.

Redux에서는 diff(차이)를 추적합니다. 즉, 이전 상태와 새로운 상태를 비교하여 변화가 일어난 부분만 업데이트합니다. 이를 통해 성능 향상과 메모리 절약을 할 수 있습니다.

Redux에서는 trace(추적)를 지원합니다. 이를 통해 Redux가 어떻게 상태를 변경하는지 추적할 수 있습니다. Redux는 상태 변경을 추적하여 디버깅을 쉽게 할 수 있도록 도와줍니다.

마지막으로 Redux는 테스트(test)를 용이하게 해줍니다. Redux는 상태(state)와 액션(action)을 분리하여 테스트하기 쉽게 만들어줍니다. 상태와 액션을 분리함으로써 Redux 애플리케이션을 테스트하는 것이 더욱 쉬워집니다. 또한 Redux는 상태가 불변(immutable)하도록 유지하므로, 상태 변경에 대한 테스트를 수월하게 할 수 있습니다.