React - Redux1

컴포넌트가 많아지면 props를 통해 데이터를 전달하기가 몹시 복잡해집니다. 이런 복잡함을 조금은 덜기 위해 Redux 라는 라이브러리를 사용합니다. Redux 라이브러리에 대해서 공부해보겠습니다.

 

1️⃣  Redux 세팅법

 

① 우선 리덕스를 사용하기 위해서는 라이브러리를 설치해야합니다. 터미널에 yarn add redux react-redux 를 입력해줍니다. redux 와 react-redux 두 개의 라이브러리를 설치하는 명령어입니다. redux는 데이터를 엄격하게 관리하는 기능, react-redux는 리덕스를 리액트에서 사용할 수 있게 도와주는 기능을 제공합니다.

 

 

 

② 라이브러리 설치가 끝났다면 프로젝트 디렉토리에서 index.js 를 열어줍니다. 그리고 맨 상단에 다음과 같은 코드를 적어줍니다.

 

import { Provider } from 'react-redux';

 

그리고 <Provider> 태그로 state 값 공유를 원하는 컴포넌트를 다 감싸면 됩니다. 

 

....

<Provider>
  <App />
</Provider>

....

 

<Provider> 태그가 App 컴포넌트를 감싸고 있는 것을 확인할 수 있습니다. 

 

 

 

 

③ redux에서 state를 만드려면 createStore() 를 이용해야합니다. 이를 위해서 index.js에 다음과 같이 import 해줍니다.

 

import { createStore } from 'redux';

 

createStore는 리액트에서 state를 만들 때 사용했던 useState 같은 것이라 생각하면 됩니다. import를 했으면 createStore를 통해 state를 하나 만들어줍니다.

 

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

 

createStore( ) 에서 소괄호 안에는 함수가 들어갑니다. 그 함수의 return으로 만들고 싶은 state를 만들면 됩니다. 그러면 그 state가 변수에 저장이 되는 것입니다.

 

 

④  state를 만들었다면 이제 그 만든 state를 props처럼 등록을 해줘야 합니다. props 사용하기 위해서 컴포넌트에 등록을 해줬던 것처럼 말이죠. 

 

....

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

....

 

Provider 안에 추가해준 것을 확인할 수 있습니다. 

 

 

 

 

2️⃣  redux에 만든 state 사용법

 

저장한 state를 다른 컴포넌트에서 사용하는 방법을 알아보겠습니다. 

 

일단 state를 사용하고 싶은 컴포넌트 파일에 가서 하단에 다음과 같이 코드를 작성해줍니다.

 

function stateProps(state){
  return {
    state : state
  }
}

export default connect(stateProps)(Cart);

 

두 코드의 의미는 다음과 같습니다. 

 

우선 함수는 store에 저장된 state를 props화 해주는 함수입니다. 그래서 이름을 일단 저런 식으로 지었는데 자유롭게 지어도 상관없습니다.  함수에서 보이듯이 return을 줘야합니다. 그리고 state : state 부분에서 빨간색 state는 자유롭게 작명을 해도 됩니다. 파란색 state는 redux에서 만든 state를 의미합니다. 따라서 코드를 이렇게 적으면 만들어 놓은 state 모두가 state에 저장됩니다. 

 

아래 코드는 react-redux 라이브러리 사용법입니다. connect 라는 함수에 위에서 만든 함수를 집어넣어줍니다. 그리고 그 다음 소괄호에는 state를 사용할 컴포넌트를 집어넣어줍니다. 그러면 이제 store에 저장된 모든 데이터들이 props로 엮인 채로 export 됩니다.

 

 

 

그러면 이제 이제 자유롭게 데이터바인딩을 할 수 있습니다. 예를 들어 store에 저장된 데이터 중 이름을 데이터바인딩 하고 싶다면 props.state[0].name 이렇게 할 수 있습니다. array 형식으로 데이터가 저장되어 있기 때문에 state[0] 이렇게 한 것입니다.