[Redux]react-redux 생활코딩 실습 3

⚛️ react-redux 생활코딩 강의 학습내용 정리 3

앞에서처럼 컴포넌트를 분리하면 종속성은 사라지지만 관리해야 할 컴포넌트가 많아진다는 것이 문제였다. 이를 위해 'react-redux'를 이용한다.

설치

npm install react-redux

---

1. connect()()

connect api를 사용해본다. connect()()는 connect함수에서 함수를 리턴하고, 리턴한 그 함수를 또 실행시킨 값을 export한다.

connect()의 내부 코드는 아래와 같다.

✅ 두 번째 ()의 역할: WrappedComponent

함수 내에서 함수를 return하고, 그 함수에서는 WrappedComponent를 또 return한다. 이 WrappedComponent는 실습에서 따지면 DisplayNumber같은 감싸지는 컴포넌트에 해당한다.

export default connect()(DisplayNumber)

export default connect()(AddNumber)

두번째 괄호에 감싸질 컴포넌트를 인자로 전달하면, 해당 컴포넌트가 랩핑된다. 이 때 AddNumber처럼 클릭 이벤트가 필요한 경우에는 어떻게 이벤트를 전달해야 할까?

✅ 첫 번째 ()의 역할 : mapStateToProps(), mapDispatchToProps()

첫 번째()에는 첫 번째 인자로 mapStateToProps,그리고 두번째 인자로 mapDispatchToProps를 전달한다.

• mapStateToProps: redux store에 있는 state값을 React의 props로 매핑시키는 정보를 담아 전달하는 함수. props 이름: state값 형태의 객체로 return하면 props처럼 사용할 수 있게 만드는 함수이다. redux에서 store의 state값이 변경될 때 마다 실행된다. 기존 코드에서의 초기화, 구독, 전달 3가지 역할을 한 줄을 통해 해결 가능하다.

function mapReduxStateToReactProps(state){ //redux의 state값을 인자로 받는다.
    //redux에서 store의 값이 변경될 때 마다 호출
    return{
        //들어갈 props 이름:store에서 공급될 값
        number:state.number
        /*
        == 
        초기화: state = {number:store.getState().number} 
        구독: store.subscribe(function(){
            this.setState({number:store.getState().number});
        }.bind(this));
        전달: number={this.state.number}
        위 코드 부분들과 같은 역할을 하게 된다.
        */
    }
}

export default connect(mapReduxStateToReactProps)(DisplayNumber)

• mapDispatchToProps : redux의 dispatch를 react의 props로 연결시켜주는 정보를 담고 있는 함수를 만들어 주면, 다른 번거로운 작업을 react-redux에서 처리해 연결시켜준다.

function mapReduxDispatchToReactProps(dispatch){
//인자로 store.dispatch라는 api를 공급->store import 없이 바로 사용 가능
    return {
        //props이름:처리할 dispatch 함수
        onClick:function(size){
            dispatch({type:'INCREMENT',size:size})
        }
    }
}
export default connect(null,mapReduxDispatchToReactProps)(AddNumber)//전달되는 props는 이벤트 뿐,따라서 첫번째 인자는 필요없음.

---

2. Provider

위에서처럼 store를 매번 파일에서 불러올 필요 없이 즉시 편하게 사용하려면 다음과 같이 react-redux에서 제공하는 Provider 컴포넌트를 이용하면 된다.

이는 최상위 파일인 index.js에서 Provider라는 react-redux에서 제공하는 컴포넌트를 이용해 App 컴포넌트를 감싸주어야 한다.

Provider 컴포넌트의 props로 store를 전달한다. 이렇게 하면 App 아래의 컴포넌트에서 import를 매번 하지 않아도 store를 이용 가능해진다.