처음 만난 리덕스 (Redux) 문서
7.3 react-redux의 주요 API
지금부터는 react-redux 라이브러리의 주요 API들에 대해서 배워보도록 하겠습니다.
먼저 이 API들에 대해서 이해를 하고 있어야 Redux와 React를 연동하는 방법을 설명할 수 있기 때문에, 먼저 이 부분을 짚고 넘어가는 것입니다.
가장 먼저 나오는 것은 Provider입니다.Provider라는 단어는 제공자라는 뜻을 갖고 있습니다.react-redux 패키지의 Provider는 실제로는 Provider Component입니다.
일종의 리액트의 컴포넌트인 것이죠.
그리고 이 Provider Component가 하는 역할은 바로 하위 컴포넌트들이 Redux Store에 접근할 수 있게 해주는 것입니다.
우리가 강의 초반에 Redux와 Context API를 비교하면서 봤던 그림을 잠깐 다시 보겠습니다.
이 그림처럼 Redux는 Store에 있는 State들을 컴포넌트로 곧바로 전달할 수 있었습니다.
그리고 이렇게 데이터를 전달하는 통로는 바로 리액트의 Context API 였습니다.
Redux는 내부적으로 이 Context API를 사용하여 컴포넌트 Tree를 따라 스토어에 있는 데이터들을 전달합니다.
function App(props) {
const [value, setValue] = useState({ something: 'something' });
return (
<MyContext.Provider value={value}>
<Toolbar />
</MyContext.Provider>
);
}
그리고 Context API를 이미 공부한 분들은 알겠지만, Context의 데이터를 하위 컴포넌트로 전달하기 위해서는 위 코드처럼 Provider 컴포넌트로 감싸주어야 합니다.
그리고 react-redux 패키지의 Provider도 동일한 역할을 한다고 이해하면 됩니다.
import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import { App } from './App';
import createStore from './createReduxStore';
const store = createStore();
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<Provider store={store}>
<App />
</Provider>
);
Context의 Provider는 value라는 prop을 갖고 있었는데, react-redux의 Provider는 이 코드처럼 store를 prop으로 갖고 있습니다.
그리고 여기서 store는 바로 Redux Store가 되는 것이죠.
결국 Provider의 하위 컴포넌트들이 Redux Store에 접근할 수 있도록 해주는 것입니다.
Redux를 React에 연동하는 과정에서 이 Provider는 필수라고 보시면 됩니다.
그리고 모든 하위 컴포넌트가 Redux Store에 접근할 수 있도록, 보통은 최상위 컴포넌트를 Provider로 감싸게 됩니다.
리액트에서는 일반적으로 최상위 컴포넌트의 이름이 App인 경우가 많기 때문에, 위 예시코드처럼 App 컴포넌트를 감싸면 됩니다.
마지막 업데이트: 2023년 07월 14일 00시 00분
이 문서의 저작권은 이인제(소플)에 있습니다. 무단 전재와 무단 복제를 금합니다.