[React] props 대신 redux 사용해보기

💡 실습 포인트!

• 이번에는 props 를 대신하는 방법 중 하나인 redux 에 대해서 조금 공부해보았다.
• 아직까지는 내가 만든 프로젝트가 하위 Component 가 별로 없다보니 props 보다 편한지에 대해 논하기는 어렵긴 하다.
• 마지막 redux 수업까지 잘 들어서 야무지게 써먹어야겠다.

---

💜 props 대신에 사용할 수 있는 방법 찾아보기

• props 를 대신할 수 있는 방법으로는 Context API 나 Redux 를 이용하는 방법이 있다.
• 이전에는 Context API 를 이용하는 방법을 살펴보았으므로, 이번에는 Redux 를 이용해보았다.
• 사실, React 를 이용한 실제 사이트 개발 환경에서는 redux 를 설치하여 사용하는 곳이 좀 더 많다.

---

💜 장바구니 페이지 만들기

🤍 장바구니 페이지에 표 레이아웃 추가하기

<div>
  <Table responsive>
    <thead>
      <tr>
        <th>#</th>
        <th>상품명</th>
        <th>수량</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1</td>
        <td>상품명</td>
        <td>수량</td>
      </tr>
      <tr>
        <td>2</td>
        <td>상품명</td>
        <td>수량</td>
      </tr>
      <tr>
        <td>3</td>
        <td>상품명</td>
        <td>수량</td>
      </tr>
    </tbody>
  </Table>
</div>

• Cart.js 파일을 생성한 뒤 Cart Component 를 만들어서 일반적인 장바구니 페이지처럼 표 레이아웃을 추가해주었다.
• 빠른 레이아웃 디자인을 위해 표 레이아웃은 React Bootstrap 의 table 을 복사-붙여넣기한 후 수정을 해주었다.

---

🤍 라우터 설정하기

// 코드 전체 미리보기
// 코드 내용이 너무 길어서 불필요한 부분은 제외했다.

import Cart from './Cart';

function App() {

  return (
    <div className="App">

        <Switch>

          <Route path='/cart'>
            <Cart />
          </Route>

        </Switch>
      
    </div>
  );
}

• 이제 기존에 라우터를 설정해주던 부분으로 가서 /cart 라는 경로로 GET 요청을 보내면 Cart Component 를 보여주도록 설정해주었다.
• 물론 Cart.js 파일에서 Cart Component 를 export 해주고 App.js 파일에서 import 해야한다는 점 잊지 말자!
• 여기까지 완료하면 브라우저에서 /cart 로 접속하면 Cart Component 가 보인다.

---

💜 redux 설치 후 셋팅하기

• 이전에는 최상위 파일에 state 를 만들어서 데이터를 저장한 후 props 로 전송받았다면, 이번에는 redux 를 이용해서 보관해보았다.

🤍 redux 설치하기

// npm 을 이용할 때
npm install redux react-redux

// yarn 을 이용할 때
yarn add redux react-redux

• Redux 를 이용하려면 라이브러리를 2개(redux, react-redux) 설치해주어야 한다.
  • redux 는 데이터를 엄격하게 관리하는 기능을 제공한다.
  • react-redux 는 Redux 를 React 에서 사용할 수 있게 도와주는 기능을 제공한다.
• 따라서 위 코드 중 하나를 선택하여 터미널에 입력해주면 2개의 라이브러리가 설치된다.

---

🤍 redux 셋팅하기

// 코드 전체 미리보기
// 코드 내용이 너무 길어서 불필요한 부분은 제외했다.

import {Provider} from 'react-redux'; // 1단계
import { createStore } from 'redux'; // 3단계

let store = createStore(()=>{ // 3단계
  return [
    { id : 1, name : 'Red Knit', quan : 2 },
    { id : 0, name : 'White and Black', quan : 1 },
    { id : 3, name : 'Flowey', quan : 3 }
  ] 
});

ReactDOM.render(
  <React.StrictMode>
    <BrowserRouter>
      <Provider store={store}> // 2단계, 4단계
        <App />
      </Provider>
    </BrowserRouter>
  </React.StrictMode>
);

• redux 를 이용한 개발환경을 셋팅하려면 index.js 파일에서 위와 같이 코드를 작성해주면 된다.
  • 1단계 : Provider 를 react-redux 로부터 import 한다.
  • 2단계 : state 값을 공유하고자 하는 Component 를 <Provider></Provider> 로 감싸준다.
    (나의 경우, App Component 를 감싸주어 App Component 쁜만 아니라 그 안의 모든 HTML, Component 에서 state 를 props 전송 없이 직접 사용할 수 있도록 해주었다.)
  • 3단계 : redux 에서  createStore() 함수를 사용하여 state 를 하나 만든다.
    (createStore 를 redux 로부터 import 한 다음, createStore() 안에 state 초기값으로 사용할 데이터를 콜백함수의 형태로 넣어주면 된다.)
  • 4단계 : <Provider> 에 state 를 props 처럼 등록한다.

---

💜 redux 에 저장한 state 데이터 꺼내쓰기

• 위와 같이 데이터를 redux 에 저장했다면 Cart.js 파일에서 state 데이터를 꺼내쓸 수 있다.
• 즉, 이제 Cart Component 내의 Table Component 에 데이터바인딩을 할 수 있다는 것이다.
• 그러기 위해서는 store 라는 변수명으로 받아온 데이터를 props 의 형태로 등록해야 한다. 

🤍 데이터를 사용할 Component 가 있는 JavaScript 파일 하단에 함수 만들기

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

• 이 함수는 store 안에 있던 state 를 props 로 만들어주는 역할을 한다.
• return 안에 { 변수명 : 받아온_state } 와 같이 작성해주면 store 안에 있던 모든 state 데이터가 props 로 등록된다.
• 물론 필요한 state 만 { 변수명 : 받아온_state.name } 과 같은 형태로 받아와 props 로 등록하는 것도 가능하다.

---

🤍 export default 뒤에 connect 함수 넣기

import { connect } from 'react-redux';

• 일단 위와 같이 react-redux 에서 connect() 함수를 import 해온다.
• 하단에서 export default connect()() 형태로 export default 문을 작성하다보면 자동으로 import 되기도 한다.

export default connect(Store)(Cart);

• 이제 이전에 Cart component 를 export 하기 위해 작성했던 코드인 export default Cart 를 수정해주어야 한다.
• connect() 함수에 아까 만든 Store 함수를 집어 넣어준 다음, Cart Component 도 소괄호 안에 집어넣어주면 된다.
• 따라서, 위와 같이 코드를 작성하게 되면 redux store 에 있던 데이터들이 props 로 엮인 채로 Component 가 export 되는 것이다.

---

🤍 props 처럼 데이터바인딩하기

function Cart(props) {

  return(
    <div>
      <Table responsive>
        <thead>
          <tr>
            <th>#</th>
            <th>상품명</th>
            <th>수량</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>1</td>
            <td>props.state[0].name</td>
            <td>props.state[0].quan</td>
          </tr>
          <tr>
            <td>2</td>
            <td>props.state[1].name</td>
            <td>props.state[1].quan</td>
          </tr>
          <tr>
            <td>3</td>
            <td>props.state[2].name</td>
            <td>props.state[2].quan</td>
          </tr>
        </tbody>
      </Table>
    </div>
  )

}

• 이제 props 처럼 사용을 하려면, Cart Component 에 props 라는 파라미터를 추가하여 Store() 함수에서 state 라는 변수명으로 저장한 데이터를 받아오면 된다.

---

💜 map 함수를 이용하여 확장성 업그레이드하기

// 코드 전체 미리보기
// 코드 내용이 너무 길어서 불필요한 부분은 제외했다.

<Table responsive>
    <thead>
    <tr>
        <th>#</th>
        <th>상품명</th>
        <th>수량</th>
    </tr>
    </thead>
    <tbody>
        {
            props.state.map((item, idx)=>{
                return (
                    <tr key={idx}>
                        <td>{ idx + 1 }</td>
                        <td>{item.name}</td>
                        <td>{item.quan}</td>
                    </tr>
                )
            })
        }
    </tbody>
</Table>

• 강의는 데이터바인딩으로 끝났지만.. 역시 하드코딩된 것을 그대로 두고볼 수는 없었다!
• 반복문으로 만들면 확장성을 업그레이드할 수 있으므로 map 함수를 이용하여 코드를 수정하였다.
• 코드가 간결해지고 확장성이 좋아진 걸 보니 마음이 평온해졌다.
• 마지막으로 div 박스만 조금 더 예쁘게 수정해주었다.