[Redux] redux 용도 및 설치방법

Redux는 Context API와 비슷한 역할을 하며, 복잡한 하위컴포넌트를 만들 때 props 전송없이 바로 state 데이터 접근해서 사용할 수 있다.  props전송없이도 모든 컴포넌트들이 state 사용할 수 있게 해준다.

redux 용도

1. props 전송귀찮아서! 깊은 하위컴포넌트들도 props 여러번 전송없이 state를 직접 가져다가 쓸 수 있다.

컴포넌트 많은 사이트에서 편리하다!

2. 데이터 관리 용이

redux에서는 state 데이터의 수정방법을 미리 정의한다.

 

 

설치방법

1. yarn add redux react-redux

2. index.js에 다음 명령어 설치

import {Provider} from 'react-redux';

3. <Provider>로 <App> 감싸기

Provider로 감싼 모든 컴포넌트, html은 같은 state 공유

4.  createStore() 안에 state 저장

import { createStore } from 'redux';

let store = createStore(() => {[id: ~, name:~]});

state초기값을 넣어준다.

5. <Provider>에 props 전송

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

6. 그 state를 사용하고 싶은 컴포넌트에서 셋팅!

import { connect } from 'react-redux';

function 함수명(state) {
    return {
    	props이름: redux state 데이터
    }
}
export default connect(함수명)(컴포넌트명);

이 함수는 redux store 데이터를 가져와서 props로 변환해주는 역할을 한다.

props로 이제 변환했기 때문에 컴포넌트 인자로 props로 받아오고, props.어쩌구 로 접근해서 사용하면된다.

=> props로 등록하고 쓴다.