[문제 해결] toast-ui 디폴트 밸류, 수정할 때 빈값 들어가는 문제, 랜딩 페이지 엔터쳐서 넘어가기

 

 

export default function BeanMarketEditPage() {
  const [isEdit, setIsEdit] = useRecoilState(isEditState);

  const router = useRouter();

  const { data, loading } = useQuery(FETCH_USED_ITEM, {
    variables: {
      useditemId: router.query._id,
    },
  });

  useEffect(() => {
    setIsEdit(true);
  }, [isEdit]);
  return loading ? "" : <BeanmarketWrite data={data} />;
}

1. toast ui에 디폴트 밸류가 안 들어옴

2. form 써서 data보내니까 수정하지 않은 부분은 빈 값이 되어서 수정이 됨

 

두 가지 문제가 있었는데, 왜 지각했냐고 찾아오신 사과님 덕분에 해결^^* 아싸 

 

 

 1. 일단 default value를 받아오기 전에 렌더링이 돼서 문제임. 해결하기 위해선 edit page 최상위 컴포넌트에서 fetch로 data 받아올 때, loading도 같이 받는다. loading 상태일 땐 ""를, 로딩이 아닐때(끝났을 때) Write 컴포넌트를 반환한다.

 

 2. setValue로 데이터를 강제로 넣어준다. 

 useEffect(() => {
    setValue("name", props.data?.fetchUseditem?.name);
    setValue("remarks", props.data?.fetchUseditem?.remarks);
    setValue("price", props.data?.fetchUseditem?.price);
  }, []);

presenter 에서 useEffect로 data에서 받아온 정보들을 넣어주면 된다. 

 

 

---

 

useEffect(() => {
    // 클릭해서 넘어가는 거 해야함
    const handleKey = (event) => {
      if (location.pathname !== "/") return;
      if (event.key === "Enter" || event.key === "Click") {
        router.push("/boards/main");
      }
    };
    // window.aaa = "fff";
    window.addEventListener("keydown", handleKey);
  }, []);

클릭 또는 엔터를 쳤을 때 넘어가게 하고 싶었다.

클릭했을 때 넘어가는 건 실제로 많이 쓰이고, 이미지 누르면 onClick에 함수를 바인딩 하면 되는 거라 좀 더 간단하다.

나는 엔터를 치는게 더 쉬울줄 알고(?) 이렇게 한건데... 아무튼 페이지가 잘 넘어가긴 하는데 window.addEventListener라서 어떤 페이지에서든 엔터만 치면 boards/main으로 넘어가는 문제가 발생했다.

 

 그래서 멘토님이 처음엔 location.pathname을 찍어보시곤, 이 페이지에서만 작동하도록 하게끔 해주셨다. 

그러나 이건 addEventListener가 사라지지 않고 계속 키다운이 일어날때 마다 이벤트를 받는다는 문제가 있다. 

그래서 그 후에 remove를 해주면 될 것 같다고 하셔서 혼자 해봤다.

 

  useEffect(() => {
    const handleKey = (event) => {
      if (event.key === "Enter" || event.key === "Click") {
        window.removeEventListener("keydown", handleKey);
        router.push("/boards/main");
      }
    };
    window.addEventListener("keydown", handleKey);
  }, []);

그리고 내 코드에서 event.key === "Click"은 작동 안 하는 것 같다..ㅎㅎ 아무리 클릭해도 넘어가지진 않음.

일단 마우스는 key로 보지 않는 것 같다. 마우스는  mouse event가 따로 있다. (지금은 event.key === "Click" 부분 지웠음)

어쨌든.... 엔터쳐서 넘어가기 성공!