"APIs"
Intro
오늘은 React-Redux 가 제공하고 있는 API 를 간략하게 다뤄보려고 합니다. 리액트 앱에서 리덕스를 사용하기 위해 알아두어야 하는 부분들이죠. 모든 내용은 리액트-리덕스 공식 홈페이지의 API 문서 를 참고한 것이고, 제가 이해한 부분까지를 다루고 있습니다.
<Provider>
리덕스의 store 를 사용하기 위해서 가장 먼저 진행해야 하는 것은 리액트 앱 전체를 <Provider> 로 감싸주는 것입니다.
const store = createStore(rootReducer)
ReactDOM.render(
<Provider store={store}>
<App />
</Provider>
document.getElementById('root')
)<Provider> 안에 store 를 전달해주고 나면 이제 본격적으로 리액트 리덕스 hooks APIs 를 사용할 준비가 되었습니다.
useSelector()
useSelector() 는 리덕스 store 에 저장된 state에 접근해 데이터를 가져올 수 있습니다. 이 때, 리덕스 store 를 subscribe (구독) 한다는 표현을 사용하는데요. 유튜브 채널을 구독(subscribe) 하면 새로운 영상이 올라올 때 알림을 받을 수 있는 것처럼, store 를 subscribe하게 되면 action 이 dispatch 될 때마다 selector 가 실행된다고 합니다.
action 이 dispatch 되면 useSelector() 는 이전 selector 의 결과값과 현재 결과값을 비교하여, 그 값이 다를 경우에만 컴포넌트가 렌더링하도록 합니다. 비교는 엄격한(===) reference equality checks 를 기본으로 합니다.
import { useSelector } from 'react-redux'
...
const counter = useSelector((state) => state.counter)
위에 보시는 것처럼 리액트 리덕스에서 useSelector 를 import 한 뒤, 변수에 할당하여 사용이 가능합니다.
useDispatch()
useDispatch() 훅을 통해 action 을 dispatch 할 수 있습니다.
리덕스는 action 객체를 dispatch 해서 전달하고, reducer 함수가 이전 state 와 action 으로 전달받은 데이터(payload) 를 비교해 새로운 state 를 store 에 전달한다고 했었죠. dispatch 를 활용하기 위해서는 먼저 useDispatch() 훅을 리액트-리덕스에서 불러와야 합니다.
import { useDispatch } from 'react-redux'
...
const dispatch = useDispatch()useSelector() 와 마찬가지로 리액트 리덕스에서 import 한 뒤 변수에 할당하여 좀 더 심플한 형태로 사용할 수 있습니다.
