return 안에 if, for, while 못쓰고 map으로 만들어라

리액트를 이용한 실제 사이트 개발환경에서 redux를 설치해 쓰는곳이 많다.
장바구니 Cart 페이지를 새로 만들며 왜 쓰는지 알아보자
redux 쓰는 이유1 : props전송 없이도 모든 컴포넌트들이 state를 사용하기 위해

깊은 곳에 있는 하위컴포넌트가 최상위 컴포넌트의 state를 쓰고 싶으면 props를 연거퍼 썼었다. redux를 쓴다면 props 없이 바로 state를 꺼내 쓸 수 있다.
( Context API와 같은 역할 )

Cart.js 장바구니 페이지 만들기( 컴포넌트로 )
Bootstrap으로 table 레이아웃을 손쉽게 가져온다.

(Cart.js)

import React from 'react';
import {Table} from 'react-bootstrap';

function Cart(){
  return (
    <div>
      <Table responsive>
        <tr>// 가로줄 하나 생성해달라
          <th>#</th> 
          <th>상품명</th>
          <th>수량</th>
          <th>변경</th>
        </tr>
        <tr>
          <td>1</td> // th,td는 세로줄 하나 생성해달라
          <td>Table cell</td>
          <td>Table cell</td>
          <td>Table cell</td>
        </tr>
      </Table>
    </div>
  )
}

export default Cart;

(App.js)

import Cart from './Cart.js';

function App(){
  return (
    <Router path="/cart"> //react의 route역할 : 해당 페이지로 이동시켜라
      <Cart></Cart>
    </Router>
  )
}

Cart에 상품데이터를 바인딩 해볼 것이다.
상품 데이터는 redux를 이용해 보관해보자

데이터를 보관하기 위한 Redux 설치

터미널에
yarn add redux react-redux 또는 npm install redux react-redux
(redux, react-redux 2개의 라이브러리)
redux : 데이터를 엄격하게 관리하는 기능
react-redux : 리덕스를 리액트에서 쓸 수 있게 도와주는 기능

redux를 이용한 개발환경을 세팅하기위해 index.js 열어서 다음과 같이 작성

(index.js)

import 많은곳;
import {Provider} from 'react-redux';

ReactDOM.render(
  <React.StrictMode>
    <BrowserRouter>
      <Provider>
        <App/> // <App>컴포넌트와 그 안에 있는 HTML, 컴포넌터들은 전부 state를 props없이 사용할 수 있다.
      </Provider>
    </BrowserRouter>
  </React.StrictMode>

);

(셋팅1) Provider라는걸 import
(셋팅2) 그걸로 state값 공유 원하는 컴포넌트를 감쌈

컴포넌트가 매우 깊숙히 있다면 state를 전달하기위해 props를 여러번 써야하는데
redux를 이렇게 셋팅해주면 손쉽게 state를 꺼내 쓸수 있다.
(Context API랑 매우 비슷) 회사의 컨벤션에 따라 어떤걸 선호하는진 다르다.

(셋팅3) redux에서 state를 하나 만드려면 createStore()함수를 사용. (useState가 아니다.)

(index.js)

import 많은곳;
import {Provider} from 'react-redux';
import {createStore} from 'redux';

let store = createStore(()=>{ return [{id : 0, name : '멋진신발', quan : 2}]  })
// return으로 state 초기값을 퉤 뱉어낸다.
ReactDOM.render(
  <React.StrictMode>
    <BrowserRouter>
      <Provider store={store}>
        <App/>
      </Provider>
    </BrowserRouter>
  </React.StrictMode>

);

(셋팅4) 만든 state를 Provider에 props처럼 등록하면 끝
<Provider store={store}>
{id : 0, name : '멋진신발', quan : 2} 처럼 장바구니용 데이터를 redux store 안에 만듬. (redux 설치 후엔 state들을 store라는 명칭으로 부른다. 위에서 만든 변수명을 store로 만들기도 했고)

store에 있는 state 데이터를 꺼내쓰는 법

저장한 데이터를 Cart.js에서 부트스트랩 통해 만든 테이블 내에 데이터 바인딩 해보자.
store안에 있는 데이터를 props 형태로 등록을 해야 사용가능함
하단의 2단계 스탭을 따라 작성해준다.

(Cart.js)

import 많은곳;
import {connect} from 'react-redux';
function Cart(){
  return (
    <div>
      <Table responsive>
        <tr>
          <th>#</th>
          <th>상품명</th>
          <th>수량</th>
          <th>변경</th>
        </tr>
        <tr>
          <td>1</td>
          <td>Table cell</td>
          <td>Table cell</td>
          <td>Table cell</td>
        </tr>
      </Table>
    </div>
  )
}

function state를props화(state){
  return {
    state : state
  }
}

export default connect(state를props화)(Cart);

1. 일단 장바구니 데이터 사용을 원하는 컴포넌트파일 밑에 function하나 만든다.
2. 매번 하던 export default 뒤에 이번엔 connect()를 적는다.( 위에서 import 해야함, 엔터키 치면 import 자동완성됨)

function state를props화(state){
  return {
    state : state
  }
}

1번 해설 : 해당 함수는 store안에 있던 state를 props로 만들어주는 역할
return 안에다가 { 자유작명 : state }이렇게 작성
-> store 안에 있던 모든 state데이터가 props로 등록됨
Cart.js 에서 자유작명을 출력해보면 저장해뒀던 redux내의 장바구니 state가 출력됨.

export default connect(state를props화)(Cart);
2번 해설 : connect 함수에 아까 만든 함수를 집어넣는다.단순 react-redux 라이브러리 사용법

(Cart.js)

import 많은곳;
import {connect} from 'react-redux';
function Cart(props){
  return (
    <div>
      <Table responsive>
        <tr>
          <th>#</th>
          <th>상품명</th>
          <th>수량</th>
          <th>변경</th>
        </tr>
        <tr>
          <td>1</td>
          <td>{props.state[0].name}</td>
          <td>Table cell</td>
          <td>Table cell</td>
        </tr>
      </Table>
    </div>
  )
}

function state를props화(state){
  return {
    state : state
  }
}

export default connect(state를props화)(Cart);

총정리

– redux는 props 전송 귀찮을 때 사용

– 일단 redux를 설치 후 셋팅

셋팅은

1. index.js에 <Provider>를 import 하고

2. state 값공유를 원하는 컴포넌트를 감싼다.

<Provider>
<App/>
</Provider>

3. createStore를 import 한 다음 사용법에 의해 콜백함수 안에 state를 만들어 let store라는 변수에 저장.

let store = createStore(() => { return [
  { id : 0, name : "멋진신발", quan : 2, change : "o"},
  { id : 1, name : "섹시신발", quan : 34, change : "x"},
  { id : 2, name : "핡핡신발", quan : 55, change : "o"}
] })

4. <Provider store={store}> 이렇게 store를 등록하면

이제 Provider로 감싼 컴포넌트<App/>는 전부 store안에 있던 값을 props없이 공유 가능해진다.

store안에 있던 state 사용은
원하는 컴포넌트 파일 가서

1. 하단에 function state를props화() 컴포넌트를 하나 만들어주고 state를 props로 등록.

2. 그리고 또 하단에 export default connect(state를props화)(Cart);

이렇게 하면 아까 만들어둔 state가 props로 등록이 된 것.

props.state이름 이렇게 저장된 state를 자유롭게 사용 가능

개인 느낌.
셋팅 과정이 꽤 복잡하다.
개발자 친구에게 Context API, Redux 둘중 뭘쓰냐 물어보니 자긴 Redux 절대 안쓰고 자기를 가르친 20년차 개발자도 왜 사람들이 Redux를 쓰는지 모르겠다고 한다.
회사의 컨벤션마다 다름을 느꼈다.
어찌됐든 둘 중에 하나를 쓰면,
컴포넌트가 깊게 있어도 props 전송 어떻게 할지 고민 안해도 된다.