Redux-React의 기본

jeonghoheo·2019년 7월 4일
2

Redux

목록 보기
2/3

redux-react image
Redux-React는 상태관리를 하기위해 React에 Redux를 연결해주는 역할을 해준다.

  • Provider

    Provider는 어렵게 생각할거 없이 단순한 하나의 컴포넌트이다. react로 작성된 컴포넌트들을 Provider안에 넣으면 하위 컴포넌트들이 Provider를 통해 redux store에 접근이 가능해진다.

Ex) Provider를 이용해 redux store에 연결하기

  • connect()

    connect함수는 Provider 컴포넌트 하위에 존재하는 컴포넌트들이
    Store에 접근하게 만드는 역할을 해준다.

1. mapStateToProps

mapStateToProps는 connect함수에 첫번째 인수로 들어가는 함수 혹은 객체다.
mapStateToProps는 기본적으로 store가 업데이트가 될때 마다 자동적으로 호출이 된다.이를 원하지 않는다면 null 혹은 undefined값을 제공해야한다.

Ex) mapStateToProps의 첫번째 인자.

Ex) mapStateToProps의 두번째 인자.

Ex) mapStateToProps를 connect함수에 사용하기

2. mapDispatchToProps

mapDispatchToProps는 connect함수의 두번째 인자로 사용된다.
이것은 기본적으로 store에 접근한 컴포넌트가 store의 상태를 바꾸기 위해
dispatch를 사용할수 있게 만들어준다.

Ex) mapDispatchToProps의 dispatch

Ex) mapDispatchToProps로 dispatch하기

이렇게 우리는 스토어의 state에 접근이 가능하고 dispatch를 하는 방법을 알아보았다.

profile
풀스택을 지향하고 프론트엔드 개발을 좋아하는 프론트엔드 개발자 입니다.

0개의 댓글