[Zeros] location.state를 사용하면 안되는 경우

언제 location.state를 사용할까? 

react router에서 useNavigate와 useLocation을 사용하면, 서로 다른 컴포넌트에서 data를 공유할 수 있다. 

 

// card component
navigate(`${id}`, {
  state: { ...data },
});

// detail page
const { data } = location.state;

 

서로 다른 컴포넌트에서 data를 공유하기

 

Zeros에서는 카드 컴포넌트를 클릭했을 때, 그 카드에 대한 디테일 정보를 확인할 수 있는 페이지로 넘어가게 되어있다. 특히 카드 컴포넌트와 디테일 페이지에 겹치는 데이터가 많기 때문에 useNaviga + useLocation을 이용해서 data를 공유하기로 결정했다(안돼).

굳이 한번 더 http 요청을 보낼 필요가 없다고 느꼈다. 맞는 말이긴 하다. 항상 카드 컴포넌트를 통해서만 디테일 페이지에 접근한다는 전제 하에...

언제 location.state를 사용하면 안될까? 

문제는 detail page에서 공유 기능을 만든 것에 있었다.

 

디테일 페이지를 공유하면, 링크를 공유받은 사용자는 디테일 페이지의 url로 직접 접근하게 된다. 이 때에는 카드 컴포넌트에서 => 디테일 페이지로 접근한 것이 아니기 때문에, navigation 함수가 호출되지 않는다. 즉 state 객체를 전달받지 못하기 때문에, data가 텅 비어있고, data를 이용해서 컴포넌트를 렌더링 하면 null 값에 접근하고 있다는 에러가 발생하게 된다. 

 

결국. state로 data를 받아오는 대신, http 요청을 통해 데이터를 받아오게끔 로직을 수정했다. 만약 사용자가 url에 직접 접근하고 있는 것인지, 아닌지를 알 수 있다면 state.data를 이용할 수 있을 것 같다(아마도...). 

정리

detail page에 접근하는 방법이 card component를 통해서 뿐인가? => location.state 사용해도 괜찮다. 그렇지 않다면, 쓰지 말아라...