코드를 작성하다보면 코드의 가독성이 떨어지는 경우가 종종 생깁니다.

이렇게 작업된 코드들의 가독성을 올리고 조금 더 효율적으로 다시 바꿔주는 작업을 리팩토링이라고 합니다.

---

💡 early-exit 패턴
→ 코드 리팩토링의 패턴 중 하나로 실무에서 자주 사용되는 패턴입니다.

우리는 지금까지 보통 if문에서 조건이 참이면 무언가를 실행하는 방식이었지만, early-exit 패턴에서는 반대로 거짓일때로 사용합니다.

활용예시

// 나쁜 예시
function upgradeItem(item){
  if(item.price>100){
		// 길고 긴 수정 과정
  }
}

// 좋은 예시
function upgradeItem(item){
  if(item.point<=100){
    return;
  }
		// 길고 긴 수정 과정
}

---

Custom Hooks

지금까지 우리는 useState, useContext, useEffect, useRef 등 다양한 react 내장 Hook을 사용해 왔습니다. 그렇기에 함수형 컴포넌트에서 state와 LifeCycle 관리가 가능하였습니다.

Custom Hook이란 이름 그대로 개발자가 스스로 커스텀 한 훅을 말합니다. 커스텀 훅을 통해 우리는 좀 더 간결한, 재사용성 높은 코드를 만들 수 있게됩니다.

예를 들어, 페이지 이동을 커스텀 훅을 통해 사용한다면,

HOF 방식을 사용하여 useMove 라는 커스텀훅을 만들어주고,

import 시켜 간결한 사용이 가능해집니다!

---

refetch의 문제점과 개선 방법(modify)

현재까지 우리는 refetch 라는 기능을 통해서 손쉽게 화면을 업데이트 했습니다.

하지만 이는 좋은 방법은 아닙니다.

불필요한 네트워크 요청을 백엔드에 한 번 더 보내게 되는 것이죠.

따라서, 추가적인 네트워크 요청 없이 프론트엔드의 apollo 저장소에 직접 자바스크립트로 CRUD를 하게되면 대규모 환경에서 더 효율적인 서비스를 제공할 수 있겠죠?

업데이트 방법은 아래와 같습니다

const { data } = useQuery<Pick<IQuery, "fetchBoards">, IQueryFetchBoardsArgs>(
    FETCH_BOARDS
  );

const onClickSubmit = async (data: FormValues) => {
    await createBoard({
      variables: { createBoardInput: { ...data } },
      update(cache, { data }) {
        cache.modify({
          fields: {
            fetchBoards: (prev) => {
              return [data.createBoard, ...prev];
            },
          },
        });
      },
    });
  };

 const onClickDelete = (boardId) => async () => {
    await deleteBoard({
      variables: { boardId },
      update(cache, { data }) {
        const deletedId = data.deleteBoard;
        cache.modify({
          fields: {
            fetchBoards: (prev, { readField }) => {
              const filteredPrev = prev.filter(
                (el) => readField("_id", el) !== deletedId
              );
              return [...filteredPrev];
            },
          },
        });
      },
    });
  };

---