React의 redux.

redux는 Vue.js의 vuex와 같이

 

프로젝트 패키지 안에서 모든 js 파일이 접근할 수 있는 전역 변수 및 함수 저장소이다.

 

redux를 사용하면 계층 차이가 많이 나는 props 전송을 할 필요가 없기에

 

좀 더 편리한 변수의 사용이 가능한 이점이있다.

 

 

전 포스트에 작성한 useContext와 비슷한데,

 

useContext는 react의 기본 내장 함수이며, redux는 따로 설치가 필요한 라이브러리이다.

 

 

컴포넌트의 개수와 계층 차이가 많이 나는 props의 전송이 많지않다면,

 

useContext을 사용하는게 좋을것이고

 

그렇지않고 프로젝트의 부피가 크다면 redux를 사용하는게 효율적이다.

 

 

 

우선 npm install redux react-redux 으로 설치를하자.

 

두 개의 라이브러리를 설치하는것인데,

 

redux는 데이터를 엄격하게 관리하는 기능, react-redux는 리덕스를 리액트에서 쓸 수 있게 도와주는 기능을 제공한다.

 

 

그리고 index.js로 가서

Provider와 createStore를 import하고

 

실질적으로 우리가 작성한 컴포넌트를 렌더링하는 함수인 ReactDom.render 안에

 

위 사진처럼 Provider 태그를 App 컴포넌트에 감싸준다.

 

그러면 Provider로 감싼 컴포넌트는 모두 전송된 데이터를 사용가능하다.

 

이를 위해 전역 state 데이터로 활용하고싶은 변수나 함수를 저렇게

 

store이라는 이름으로 App 컴포넌트에 props 전송한다.

 

 

참고로 state 변수로 만들 데이터들은 createStore 함수를 사용해 인자로 콜백 함수를 넣고

 

우리가 사용할 변수를 return 하도록 만들어주면 된다.

 

 

그러면 우리가 실질적으로 redux state 변수를 사용할 컴포넌트가 작성된 js 파일로 가보자.

 

그리고 파일의 최하단에

저런 redux state를 props로 변환하는 함수를 작성한다.

 

저 절차를 이행해야 redux state 사용이 가능한데,

 

argument로 받은 state에 우리가 객체나 배열을 전송했다면

 

이렇게 직접적으로 그 배열이나 객체의 index값과 property의 key값으로 할당해줄 수도 있다.

 

아니면 첫 번째 예시처럼 state를 통으로 하나의 변수에 할당하는것도 가능하다.

 

 

 

그리고 해당 컴포넌트를 export할 때 connect라는 함수에 방금 만든 state를 props로 변환하는 함수를 넣고,

 

해당 함수가 특정 함수를 return하는데 그 함수의 인자에 다시 Cart 컴포넌트를 넣는 로직이다.

 

그러면 이 컴포넌트가 다른 js 파일에 export도 되면서 redux state도 사용이 가능하다.

 

 

참고로 connect 함수는

react-redux 라이브러리에서 import가 필요하다.

 

 

 

그럼 세팅이 다 완료되었고

 

사용할 컴포넌트에서 

 

props.state 혹은 props.state ~ [index] . 프로퍼티 키값 등으로 사용 가능하다.