Redux) 데이터를 보관하기 위한 Redux 설치/셋팅

- redux를 쓰는 이유

1. 깊은 하위컴포넌트들과 props 여러번 전송없이 state를 직접 갖다 쓸 수 있음.

2. state 데이터 관리에 용이

 

 

일단 의미를 명확히하도록하자.

A: 

import Table from ~ ;

B: 

import { Table } from ~ ;

A는 ‘from ~’ 에서 export default Table 을 가져오겠다는 뜻이고

B는 ‘from ~’ 로부터 Table 이라는 것을 가져오겠다는 뜻이다.

 

redux를 다음과 같이 세팅한다.

1. 터미널을 키고 npm install redux react-redux 를 실행하여 다운받는다.

2. index.js 에서 provider 를 가져온다.

import { Provider } from 'react-redux';

import { Provider } from 'react-redux';

3. <provider> 로 <App>을 감싼다.

ReactDOM.render(
<React.StrictMode>
    <BrowserRouter>
        <Provider store={store}>
            <App />
        </Provider>
    </BrowserRouter>
</React.StricMode>
document.getElementById('root')
);

4. redux에서 state를 하나 만들기 위해선 createStore() 함수를 써야한다. 따라서  위와 마찬가지로 index.js에 다음과 같이 import 해온다. 

import { createStore } from 'redux';

5.store 라는 변수로 createStore(콜백함수) 로 다음과 같이 사용된다. 콜백함수엔 내가 원하는 state 초기값을 뱉어내면 된다.

 

 let store = createStore( () => { return [ { id : 0, name : 'shoes', quan : 2 } ] })

let store = createStore( () => { return [ { id : 0, name : 'shoes', quan : 2 } ] })

 6. store 데이터를 props로 등록한다. 

<Provider store={store}>

<Provider store={store}> // 이 부분