redux state 상태업데이트 질문

[남지윤]

안녕하세요 선생님 redux를 하면서 궁금사항이 생겨 질문드립니다..!

<detail.js>

import styles from "./Detail.module.css";
import { BiShoppingBag } from "react-icons/bi";
import { FaBars } from "react-icons/fa";
import {useNavigate, useParams } from 'react-router-dom';
import axios from 'axios';
import { useEffect, useState } from 'react';
import { setProductDetail } from "../store";
import { useDispatch } from "react-redux";

function Detail({product}) {

   let navigate = useNavigate();
   let {id} = useParams();
   let dispatch = useDispatch();
   let findproduct;
   
   
   useEffect(() => {
      
      findproduct = product.find(function(x){
         return x.id == id
      });

      dispatch(setProductDetail(findproduct));
      
   },[])

   console.log(findproduct);

*** 이부분 에서 findproduct가 계속 undifinded가 발생합니다..
 

return(
      <>
         <Header navigate={navigate}/>

         <div className={styles.detail_main}>
            {findproduct && (
               <>
               <div className={styles.detail_img_area}>
                  < img src={findproduct.images} alt="Product"/>
               </div>
               <div className={styles.detail_product_text}>
                  {findproduct.sub}
                  <h1>{findproduct.title}</h1>
                  <h5>{findproduct.content}</h5>
                  <p>₩{findproduct.price}</p>
                  <button className={styles.add_cart_button}>
                     Add Cart
                  </button>
                  <div className={styles.product_detail}>
                     ....이하 내용 생략                   

<store.js>

import { configureStore, createSlice } from '@reduxjs/toolkit'

let product = createSlice({
   name: 'product',
   initialState: {},
   reducers: {
      setProductDetail: (state, action) => {
         return action.payload;
      },
   },
});

export let {setProductDetail} = product.actions;

export default configureStore({
  reducer: {
   product: product.reducer
  }
}) 

질문1 )
detail.js에 있는 findproduct를 리덕스 store.js안에 product로 상태업데이트? 옮기고 싶은데 
detail.js에 findproduct가 계속 undifined가 떠서 진행이 안됩니다.. ㅠㅠ 뭐가 문제인지 잘 모르겠습니다
useEffect를 사용하지않고 
findproduct = product.find(function(x){
  return x.id == id
}); 이런식으로 작성하면 내용물이 잘뜨지만 
useEffect 사용하면 아예 내용물이 뜨질않습니다...

질문2)

function Detail({product}) {

   let navigate = useNavigate();
   let {id} = useParams();
   let dispatch = useDispatch();
   let findproduct;
   
   findproduct = product.find(function(x){
      return x.id == id
   }); 

   console.log(findproduct);

이런식으로 작성후 디테일페이지접속하면 상품이 잘뜨다가 F5로 새로고침하면 상품이 다시 사라지는데 이건 왜 이러는건지 알수있을까요?

[codingapple]

함수안에서 만든 변수는 바깥에서 쓸 수 없어서 undefined 나올 뿐입니다 redux state변경은 잘되어있을걸요
새로고침하면 원래 state는 전부 리셋됩니다

[글쓴이]

글