React Redux 1

Redux - props전송없이 모든 컴포넌트에서 state를 사용하기 위해 사용

 

이와같은 구성에서 App.js와 index.js를 기본으로 여러 컴포넌트들을 만들어준다.

 

우선 중요한건 redux설치와 세팅 redux,react-redux두개를 설치해준다.

 

yarn add redux react-redux

npm install redux react-redux

cart.js라는 곳에 새로 만들고 컴포넌트로 app.js에 등록을해준다.

import Cart from './Cart.js'
.....
<Route path="/cart">
  <Cart></Cart>
</Route>

그리고 index.js에 redux설정을 해준다.

import { Provider } from 'react-redux';
import {combineReducers, createStore} from 'redux';
// 이거 하나를 불러와 줘야한다. /같은 경로없이 불러오는건 라이브러리다.
// import { HashRouter } from 'react-router-dom'
// 이와같이해도된다. 이건 주소에 #기호가 붙는다. 똑같지만 차이는 라우팅을 안전하게 할 수 있게도와준다.
// #이붙는거는 서버로 전달하지않는다 #은 서버에서 설정이 필요할 수 있다.

// import { Provider } from './react-redux'
// 이거 .하나때문에 오려 휴우..다행이다.

맨 위에 두줄만 불러와주면된다.

 

중간에 아래와같이 오류가나서 별거 다해봤는데 단순한 오류였다. 'react-redux'라고 해야하는데

 

.하나를 붙여서 잘못됬었다.

Module not found: Error: Can't resolve './react-redux'

npm install --save redux react-redux

여튼 중요한건 추가설정은 Provider를 세팅하는거다

 

ReactDOM.render(
  <React.StrictMode>
    <BrowserRouter>
    <Provider store={store}>
    <App />
    </Provider>
    {/* Provider로 감싸진애들은 props없이 state공유가능 */}
    </BrowserRouter>
    {/* 이렇게 감싸주면 설정은 끝이다. */}
    
  </React.StrictMode>,
  document.getElementById('root')
);

이와같이 <App/>을 Provider로 감싸준다. 그러면 state를 props없이 전송할 수 있다.

import {createStore} from 'redux';

let store = createStore(()=>{ return [{id : 0, name : '멋진신발', quan : 2},
{id : 1, name : '멋진신발2', quan : 3},
{id : 2, name : '멋진신발3', quan : 5},
]  })

........

ReactDOM.render(
  <React.StrictMode>
    <BrowserRouter>
    <Provider store={store}>
    <App />
    </Provider>
    {/* Provider로 감싸진애들은 props없이 state공유가능 */}
    </BrowserRouter>
    {/* 이렇게 감싸주면 설정은 끝이다. */}
    
  </React.StrictMode>,
  document.getElementById('root')
);

redux에서는 createStore를 이용해 자료를 정리한다.

 

let store로 변수를 지정하고 그안에 createStore를 사용해 저장하는 형태이다.

 

이제 이러한 store의 데이터를 props의형태로 다른 컴포넌트에서 등록을 해줘야한다.

 

import {connect} from 'react-redux';

function Cart(){
  return (
    <div>
      .......
    </div>
  )
}

....

function state를props화(state){
  return {
    state : state
  }
}

export default connect(state를props화)(Cart);

이와같이 상단에 connect를 import해오고 하단에 function과 export를 해줘야한다.

 

라이브러리 사용법이기 때문에 외워서 이해만해서 사용하도록하자

 

함수는 store에있던 state를 props화 해주고, return은 { 작명할이름 : state } 형태로 넣으면된다.

 

그러면 { 작명할이름 : state.name } 형식으로 등록도 할 수있다 사용자의 마음대로!

 

여튼 바로 가져가서 props입력만 해줘서 사용하면 된다.

 

function Cart(props){
  return (
    <div>
      <Table responsive>
        <tr>
          <th>#</th>
          <th>상품명</th>
          <th>수량</th>
          <th>변경</th>
        </tr>
        <tr>
          <td>1</td>
          <td>{props.state[0].name}</td>
          <td>Table cell</td>
          <td>Table cell</td>
        </tr>
      </Table>
    </div>
  )
}

이와같이! 사용할 수 있다.

 

---

- index.js에 Provider import

- state 공유할 컴포넌트를 감싸기

- createStore를 import한후 state를 만들어 let store에 저장

- store등록

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

이 안에 있는 컴포넌트는 전부 props없이 state공유

 

이제 store에있는 state를 사용하기위해

 

- 컴포넌트 파일로가서 (Cart.js) 하단에 function 을 만들어준후

- export default connect()() 형태로 사용해준다.

- props.state이름 형태로  state이용