리액트 props 새로고침 후 데이터값 사라지는 에러

[이은서]

안녕하세요.

강좌 완강은 아직 아니지만 거의 파트 2까지는 다 완강하고 파트 3 보면서 따라 하고 있습니다.

스프링부트+postgreSQL 이용해서 백엔드 만들어서 이미지와 기타 물건의 이름, 가격, 등등 정보를  json 형식으로 저장한 후 리액트 이용해 몇가지 실험 해본 결과 지금까지 서버에는 큰 문제는 없어보입니다.

리액트 프로젝트에서 서버/디비에 있는 데이터를 이러한 형식으로 가져오는것, 메인에서 해당 물건(사진)을  눌렀을때 Detail.js 로 넘어가서 디테일 페이지를 구현하는데 있는데 이상한 에러가 나네요. 

메인app.js에서 사진 누르면 세팅해둔 올바른 주소로 "/detail/:id"  화면 잘 뜹니다. 근데 저기서 새로고침 하거나 메인화면서에 사진클릭해서 넘어가는 방식이 아닌 직접 주소창에 주소입력하면 에러가 납니다...

구글링을 아무리 해도 모르겠습니다.... 

 

app 펑션에서 데이터 fetching 코드 입니다. productList가 물건들 정보 담긴 json array 입니다.

let [productList, setProductList] = useState([]);
const [fetch, setFetch] = useState(true);
let temp = [];

useEffect(() => {
const fetchPosts = async () => {
const res = await Product.getAllProducts();
setProductList(res.data);
}
if (fetch){
fetchPosts()
.catch(error => console.log(error));
}
}, []);

app.js 에 만든 productList를 하나씩 띄우는? 펑션 입니다. 사진 클릭하면 history 이용해서 디테일로 보내버렸습니다.

function Item(props) {
let history = useHistory();
return (
<div className="col-sm-3" onClick={() => {
history.push("/detail/" + props.productList.pid)
}}>
<img/>
<h5>{props.productList.name}</h5>
<p>{props.productList.price}</p>
</div>
)
}

 라우트 이용해서 디테일패스와 프롭스 지정해둔 부분 입니다 스위치 사용했습니다

<Route path="/detail/:id">
<Detail productList={productList} />
</Route>
이렇게 productList 보냈는데 아이템 onclick 통해 해당 패스로 보낼때는 productList도 잘 가는데 디테일 띄운 상태로 새로고침 하거나 직접 주소창에서 패스 입력했을때 위 사진과 같은 에러가 납니다.. 디테일.js 만들어서 당연히 import도 잘 했습니다. ......꼬박 하루를 똑같은 에러만 보고 있습니다.......

[codingapple]

원래 새로고침하면 state가 초기화됩니다 

/detail/어쩌구 접속시 서버에다가 데이터를 요청하는 코드를 useEffect 이런 곳에 짜놓으면 됩니다 

 

[글쓴이]

글