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

💡 실습 포인트!

• 기존에 작성했던 state 를 props 로 만들어주는 함수 및 export default connect()() 는 상대적으로 예전에 쓰이던 방식이지만 현업에서 코드를 읽어낼 수 있어야 하므로 이전 수업을 통해 배워보았다.
• 이번에는 useSelector() 와 useDispatch() 를 이용하여 훨씬 더 쉽고 간략하게 코드를 작성할 수 있는 방법을 배워보았다.
• 수업에 배운 것들을 활용하여 다른 파일에도 적용해보았다.

---

💜 전체 코드 미리보기

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

import { useDispatch, useSelector } from 'react-redux';

function Cart(props) {

    let state = useSelector((state)=>state);
    let dispatch = useDispatch();

    return(
        <CartContainer>
            <Table responsive>
                <thead>
                <tr>
                    <th>#</th>
                    <th>상품명</th>
                    <th>수량</th>
                </tr>
                </thead>
                <tbody>
                    {
                        state.reducer.map((item, idx)=>{
                            return (
                                <tr key={idx}>
                                    <td>{ idx + 1 }</td>
                                    <td>{item.name}</td>
                                    <td>
                                        <ChangeNum onClick={ ()=>{ dispatch({ type : 'plus' , payload : idx }) } }>+</ChangeNum>
                                            {item.quan}
                                        <ChangeNum onClick={ ()=>{ dispatch({ type : 'minus', payload : id : idx }) } }>-</ChangeNum>
                                    </td>
                                </tr>
                            )
                        })
                    }
                </tbody>
            </Table>
            {
                state.reducer2 === true ? (
                    <Alert>
                        <span className='me-3'>신규가입시 최대 20% 할인 쿠폰 제공!</span>
                        <button className='btn btn-outline-danger' onClick={ ()=>{ dispatch({ type : 'close' }) } }>닫기</button>
                    </Alert>
                ) : null
            }
        </CartContainer>
    )
}

export default Cart;

---

💜 useSelector

• redux store 에 저장되어있던 state 를 꺼내어 사용하기 위해서는 state 를 props 로 만들어주는 함수를 추가하고 export default connect()() 를 사용해야 한다고 이전 수업까지 공부했다.
• 사실 이것은 옛날 방식이며 요즘에는 useSelector 라는 Hook 을 사용해서 더 쉽게 state 를 꺼내어 올 수 있다.

🤍 useSelector 사용하는 방법 알아보기

function Store(state) {

    return {
        data : state.reducer,
        alert : state.reducer2
    }

}

export default connect(Store)(Cart);

• 이전에는 위와 같이 state 를 props 로 만들어주는 함수(위 코드의 Store() 함수)와 export default connect()() 를 사용했는데 이제 함수는 지워주면 된다.

export default Cart;

• 그리고 마지막줄의 export default 코드는 connect() 대신 그냥 Component 이름인 Cart 로 바꾸어준다.

 

 

import { useDispatch, useSelector } from 'react-redux';

function Cart(props) {

    let state = useSelector((state)=>state);
    let dispatch = useDispatch();

    return(
        <CartContainer>
		  // 생략
        </CartContainer>
    )
}

export default Cart;

• 이제 useSelector() 라는 함수를 import 한 다음, useSelector() 안에 콜백함수를 작성하고 이를 state 라는 변수에 저장해준다.
• 이 때, 콜백함수 안에는 파라미터 하나만 입력 가능한데 이는 자동으로 reducer 들을 합친 store 가 된다.
  ((state) => state 라고 작성하면 state 들을 state 파라미터로 받아 state 로 저장한다는 의미가 되며 더 세부적으로 작성하는 것도 가능하다.) 
• 이제 기존의 코드들 중 수정이 필요한 부분을 수정해주면 된다. 
  (예를 들어, props.data.map~ 부분은 state.reducer.map~ 이런 식으로...)

---

💜 useDispatch

🤍 useDispatch 사용하는 방법 알아보기

import { useDispatch, useSelector } from 'react-redux';

function Cart(props) {

    let state = useSelector((state)=>state);
    let dispatch = useDispatch();

    return(
        <CartContainer>
		  // 생략
        </CartContainer>
    )
}

export default Cart;

• useDispatch() 라는 함수를 import 한 다음, useDispatch() 를 dispatch 라는 변수에 저장해준다.
• 그러면 기존에 props.dispatch() 로 state 수정 요청을 하던 것을 dispatch() 만으로 간단하게 코드 작성이 가능해진다.
• 이제 기존의 코드들 중 수정이 필요한 부분을 수정해주면 된다.
  (예를 들어, props.dispatch() 부분을 dispatch() 이런 식으로...)