[React] Redux에서 navigate 사용해서 데이터 전달해주기

장바구니 아이콘이 평소엔 이렇게 블랙이었다가 장바구니 페이지로 이동하면 밑에처럼 로고 사이트 메인 컬러인 초록색으로 바뀌어야 하는데 이럴 때, 페이지를 이동하면서 얘가 지금 장바구니 페이지구나 하고 알 수 있는 데이터를 보내줘야 했고, usenavigate에서 페이지 이동할 때 데이터를 보내주는 방법을 사용했다.

Nav bar의 카트 아이콘을 클릭해서 페이지 이동을 할 때는 페이지 이동만 하기 때문에 그냥 usenavigate을 사용해서 이동 가능했지만, 상세페이지의 장바구니담기를 클릭하고 넘어갈 때는 상품을 장바구니에 넣어주면서 페이지 이동을 하는거기 때문에 redux에서 페이지 이동 함수를 사용해야 했다. 하지만,
v5에서 사용하던 history객체는 v6부터는 usenavigate로 사용해야 하는데, v5의 history는 👇이렇게 사용이 가능했지만, v6부터 useHistory는 아예 사라졌고, usenavigate는 history처럼의 사용이 불가하고, history도 기존에 선언하는 방식처럼 선언하면 안된다.

export const addCartDB = (data) => {
    return async function (dispatch,{ history }) {
        await apis.addCart(data)
            .then((res) => {
               history("/cart")
            })
            .catch((error) => {
                console.log("장바구니에러", error)
                if (error.response.status === 406) {
                    window.alert(error.response.data.FAIL_message)
                }
            })
    }
}

여러 시도를 해봤는데...
그냥

 const modalAddCart = () => {
        const itemData = {
            product_id: product.product_id,
            quantity: quantity,
            check: itemDupCheck
        }
        if (cartItem.quantity + quantity <= product.stock || cartItem.quantity + quantity > product.stock) {
            dispatch(addCartDB(itemData, navigate));
            navigate("/cart",{
                state: {
                    isCart: true
                }
            })
        }
    }

이렇게 dispatch 일으킨 다음에 바로 페이지 이동을 시키면서 데이터를 전달하려고 했는데, 이렇게 되면 dispatch(addCartDB())부분이 에러를 일으켜도 페이지 이동이 일어나게 되니까 좋지 못한 방법인 것 같아서,

그 다음 방법으로는
window.loacation.assign() 메소드를 사용해서 페이지 이동을 하면서 데이터를 전달해줄 방법을 생각해봤는데 이 메소드는 단순히 location 객체에 속해있는 메서드들로 페이지를 이동하는데만 사용이 된다.

마지막으로 찾은 방법은,

const navigate = useNavigate();
const modalAddCart = () => {
        const itemData = {
            product_id: product.product_id,
            quantity: quantity,
            check: itemDupCheck
        }
        if (cartItem.quantity + quantity <= product.stock || cartItem.quantity + quantity > product.stock) {
            dispatch(addCartDB(itemData, navigate));
        }
    }

dispatch를 일을키는 component에서 dispatch를 일으킬 때 파라미터로 전달할 데이터와 함께usenavigate훅을 담아서 같이 전달해준다.

export const addCartDB = (data, navigate) => {
    return async function (dispatch) {
        await apis.addCart(data)
            .then((res) => 
                navigate("/cart", {
                    state: {
                        isCart: true
                    }
                })
            })
            .catch((error) => {
                console.log("장바구니에러", error)
                if (error.response.status === 406) {
                    window.alert(error.response.data.FAIL_message)
                }
            })
    }
}

그리고 보통 component에서 navigate을 사용하듯 똑같이 사용하면 된다.
이렇게 보내준 데이터를

            <Nav
                user_nav
                children={isLogin ? "마이페이지" : "로그인"}
                color={location.state?.isCart ? "#21BF48" : "none"}
                filter={location.state?.isCart ? "invert(55%) sepia(42%) saturate(1617%) hue-rotate(89deg) brightness(100%) contrast(76%)" : "none"}
            />

이렇게 Nav component에서 isCart가 true이면 컬러가 바뀌도록 사용해줬다.