리덕스를 사용해야 하는 이유

리액트는 단방향통신(부모->자식 컴포넌트)이기 때문에,
상태값을 자식 컴포넌트간 직접적으로 공유할 수 없다.
자식 컴포넌트들이 같은 상태값을 공유하기 위해서는 공통된 부모 컴포넌트에서 상태값을 Props로 각 자식컴포넌트들에 보내주어야 한다.

이러한 경우 App 컴포넌트에 모든 상태값을 두고 자식 컴포넌트로 내려보내 값을 관리하는 경우도 생기나 극히 비효율적이다
(리액트는 상태값의 변화를 인지하여 재랜더링하는 방식인데 모든 변화에 불필요한 재랜더링이 발생하게 되기 때문이다)

이를 개선하기 위해 등장한 개념이 리덕스이다.
리덕스는 스토어에 상태값을 두고 필요한 컴포넌트에서 가져와 사용하는 방식이다.

리덕스 사용방법

다만 컴포넌트가 직접적으로 스토어에서 가져와 사용하거나 변경할 수는 없다.

순서

1. 컴포넌트에서 지정되어 있는 액션을 실행한다.
2. 액션은 여러 케이스를 담고 있는 리듀서를 작동시킨다.
3. 리듀서는 스토어의 값을 업데이트한다.
4. 스토어는 하나의 오브젝트이다.

리덕스에 활용되는 Hook

useDispatch

액션을 생성하여 전달하는 역할을 한다.

useSelector

컴포넌트가 store에서 값을 가져와 업데이트 할 때 사용된다.

리덕스 세팅

Redux 설치

새로운 프로젝트를 생성 후 아래 코드로 리덕스를 설치한다.

# NPM
npm install redux

# Yarn
yarn add redux

리덕스 공식문서 바로가기

React-Redux 설치

# If you use npm:
npm install react-redux

# Or if you use Yarn:
yarn add react-redux

리액트-리덕스 공식문서 바로가기

Redux와 React-Redux

Redux는 Node.js나 JS 등등 다양하게 사용되는 기능이다.
React-React는 Redux를 리액트 어플리케이션에 적용시키는 함수를 제공하는 패키지이다.
두 리덕스는 구분된다.

리덕스 적용