navigate로 가져온 state 삭제하기

유림·2023년 7월 10일
0

JAVASCRIPT

목록 보기
17/18
  1. navigate로 url로 페이지를 이동할 수 있습니다.
    이때 state에 원하는 데이터를 담아서 이동할 수 있습니다.

    예를 들어 아래 코드처럼
    이동 시 orderNo와 clickStatus값을 넣을 수 있습니다.

navigate(PATH_ROOT.customer.inquiry, { replace: true, state : {"orderNo" : orderNo , "clickStatus" : clickStatus} });
  1. 1번의 방법으로 화면에 데이터를 가져온 뒤 페이지가 다시 렌더됐을 땐 이 데이터가 리셋되어야하는 경우들이 있습니다. 예를 들어 문의하기 페이지에서 관련된 값을 가지고 와서 기본값으로 세팅해두었는데 다른 페이지에 갔다와도 값이 계속 남아있으면 다른내용의 문의하기 내용을 작성에 불편이 있기 때문이죠

이럴 경우 아래와 같이
useEffect 함수에 return함수에 데이터가 삭제되는 코드를 추가하여 실행할 수 있습니다.

useEffect(() => {
    return () => {
      delete state?.orderNo;
      delete state?.clickStatus;
  }, []);

=> return문은 함수에서 결괏값을 반환할 때 사용합니다.
또한 함수에서 return 문이 실행되면 반복문의 break문과 비슷하게 코드가 강제 종료되는 특성이 있습니다.
때문에 return된 후 작성한 코드는 실행되지 않으니 실행되어야하는 코드는 코드의 위치가 return 앞쪽에 위치하는 것에 주의해야합니다.

profile
ɪ ʜᴏᴘᴇ ᴛᴏ sᴏʟᴠᴇ ʀᴇᴀʟ ᴘʀᴏʙʟᴇᴍs👩🏻‍💻❤️

0개의 댓글