[리액트] 리덕스에서 Provider, useSelector, useDispatch 사용하기

1. Provider, useSelector, useDispatch 역할

Provider (컴포넌트)

Provider 컴포넌트는 "State를 어떤 컴포넌트에게 제공할것인가"에 대한 가장 바깥쪽의 울타리를 정의하는 것을 말한다. 즉, Provider로 감싸고 있는 리액트 컴포넌트가 Store에 저장되어 있는 State에 접근이 가능하도록 해준다.

useSelector (Hook)

useSelector 훅은 Store에 저장된 state를 가지고와 사용할 수 있게 해준다. 저장소에 있는 어떤 state를 쓰고 싶은지 선택할때 사용.

useDispatch (Hook)

useDispatch 훅은 Store에 저장된 state의 업데이트를 요청해준다. 저장소에 있는 어떤 state를 업데이트하고싶을때 사용.

 

 

2. import하기

react-redux 라이브러리에서 Provider, useSelector, useDispatch를 import하기

import { Provider, useSelector, useDispatch } from 'react-redux';

 

3.  Provider 사용하기

리덕스와 컴포넌트를 연결시켜주기 위해 Provider 컴포넌트를 사용해준다. 이때 props로 반드시 저장소를 전달해준다. store라는 상수에 state를 관리해주는 저장소가 들어있으므로 다음과 같이 코드를 작성한다.

<Provider store={store}></Provider>

리덕스와 연결시켜주고 싶은 컴포넌트들을 Provider 컴포넌트 안에 넣어주게 되는데 다음과 같이 두가지 방법이 있다.

3.1 특정 컴포넌트한테만 state 접근 권한을 주고 싶을때

Provider 컴포넌트가 Component1, Component2, Component3을 감싸고 있으므로 세개의 컴포넌트에서만 Store에 있는 State에 접근 할 수 있게 된다. 

import { Provider } from 'react-redux';

<Provider store={store}>
  <Component1 />
  <Component2 />
  <Component3 />
</Provider>

3.2 React 프로젝트 안에 있는 모든 컴포넌트에게 state 접근 권한을 주고 싶을때

Provider 컴포넌트가 리액트의 가장 상위 컴포넌트인 App을 감싸기 때문에 리액트에 있는 모든 컴포넌트들이 Store에 있는 State에 접근 할 수 있게 된다.

import { Provider } from 'react-redux';

ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById('root')
);

 

4. useSelector 사용하기

Provider 컴포넌트로 감싸져 있는 컴포넌트에서 어떤 state에 접근하고 싶을때 사용하는 함수다. useSelector는 함수를 인자로 받아 참조하고 싶은 state를 리턴해준다

state는 리덕스가 가지고 있는 모든 데이터를 의미하므로 모든데이터를 리턴해준다

// Provider로 감싸져있는 어떤 컴포넌트

// useSelector 함수로 store에 저장된 state 가져오기
const state = useSelector(state => state);

// 컴포넌트에서 useSelector로 받아온 state 사용하기
return(
  <div>{state}</div>
)

특정 데이터를 리턴하고 싶다면 state.이름을 리턴해준다

// Provider로 감싸져있는 어떤 컴포넌트

// useSelector 함수로 store에 저장된 state 가져오기
const name = useSelector(state => state.name);

// 컴포넌트에서 useSelector로 받아온 state 사용하기
return(
  <div>{name}</div>
)

 

5. useDispatch 사용하기

컴포넌트에서 구독하고 있는 state의 수정을 요청하는 함수다. 발생시키고자 하는 액션을 파라미터로 설정해 함수를 호출해주면 reducer함수가 상태를 업데이트 해준다. 최종적으로 useDispatch 함수는 reducer 함수로부터 받은 업데이트된 state를 리턴해준다.

dispatch({ type: 'PLUS' });

위의 코드는 다음과 같은 과정을 거쳐 state를 업데이트 시켜준다:

1. dispatch 함수가 type이 plus인 액션을 파라미터로 받아 함수를 실행해 state 수정 요청

2. 수정요청을 받은 reducer 함수가 type이 plus일때 해당하는 연산을 실행

3. reducer 함수는 업데이트된 state를 리턴해줘 dispatch에 전달