함수 위치 정하기

Imnottired·2023년 6월 6일

나는 코드를 작성할 때 먼저 생각나는대로 작성을 하고,
이후에 살펴보면서 리펙토링을 통해 업그레이드하는 편이다.
이번에도 작성하고나서, 리팩토링을 하였다.

월드컵에서 후보를 추가하거나 삭제할 때
함수를 어디에 만들지 고민이 된다.
두가지 정도가 있겠는데,
하나는 부모 컴포넌트에 만들고 자식으로 내려주는 방법,
하나는 메소드나 변수를 자식에게 내려주고 만들어서 사용하는 방법이다.

먼저 삭제하기 기능을 구현하기 위해서
함수를 작성하였다.
처음에는 자식에다가 먼저 작성하였는데 이유는
부모에게는 너무 많은 이벤트가 할당되어있고,
부모가 아닌 자식 컴포넌트에서 관리한다면,
수정을 할 때 바로 컴포넌트로 들어가면 되니 직관적이고 유지보수에 편할 것이라고 생각하였다.


const handlerDelete = async () => {
    try {
      const res = await delete_worldcup(accessToken || "", id);
      console.log(res);
    } catch (e) {
      console.log(e);
    }
  };

그런데 문제는 삭제를 하고나서 부모에게 알려야하는데 알릴 방법이 없었고,
알리는 state 값을 만들어서 사용하였다.
(swr을 업데이트하는 메소드 mutate를 내려서 하면 되었지만 타입을 찾지 못했다)


const handlerDelete = async () => {
    try {
      const res = await delete_worldcup(accessToken || "", id);
      console.log(res);
      setAlram(true);//추가
    } catch (e) {
      console.log(e);
    }
  };

작성을 하고 생각을 해보니 어차피 props으로 내릴거면, 부모에서 만들고 함수로 내려주는게 낫다고 생각이 들었다.
그리고 부모는 하나인데 자식은 여러명이니 매번 함수를 만들어주면 성능적으로도 떨어진다.(map을 사용하는 경우였다)

  const handlerDelete = async (id: number) => {
    try {
      const res = await delete_worldcup(accessToken || "", id);

      mutate();

      console.log(res);
    } catch (e) {
      console.log(e);
    }
  };

그래서 handlerDelete를 부모에서 만들어주고 내려주는 식으로 해결하였다.
타입을 모르는 메소드(props으로 내려주지 못함)도 바로 사용할 수 있었다.

그외 props으로 내려주어서 함수를 만들었던 것들도 묶어서 자식에게 내려주었다.

변경 전

  const resetEditor = useResetRecoilState(postWorldcup);
  const setEditor = useSetRecoilState(postWorldcup);

       <Card
              key={v.id}
              resetEditor={resetEditor}
              worldcup={v}
              mine={true}
              setEditor={setEditor}
              handlerDelete={handlerDelete}
            />

변경 후


  const handlerWorldCup = (id: number) => {
    resetEditor();
    get_detail(id, accessToken || "").then((res) => {
      console.log(res);
      setEditor(res);
      router.push("/editors");
    });
  };
  
      <Card
              key={v.id}
              worldcup={v}
              mine={true}
              handlerDelete={handlerDelete}
              handlerWorldCup={handlerWorldCup}
            />