문제

• page에서 제목을 입력하면 캐럿이 페이지로 이동해버린다.

문제 코드

const updatePage = (
    pageId: string,
    updates: { title?: string; icon?: string },
    syncWithServer: boolean = true,
  ) => {
    setPages((prevPages) =>
      prevPages.map((page) => (page.id === pageId ? { ...page, ...updates } : page)),
    );

    if (syncWithServer && clientId && workspace?.id) {
      sendPageUpdateOperation({
        pageId,
        ...updates,
        clientId,
        workspaceId: workspace.id,
      });
    }
  };

해결 코드

const updatePage = (
    pageId: string,
    updates: { title?: string; icon?: string },
    syncWithServer: boolean = true,
  ) => {
    setPages((prevPages) =>
      prevPages.map((page) => (page.id === pageId ? { ...page, ...updates } : page)),
    );

    if (syncWithServer && clientId && workspace!.id) {
      sendPageUpdateOperation({
        pageId,
        ...updates,
        clientId,
        workspaceId: workspace!.id,
      });
    }
  };

• 보니까 workspace!.id 냐 ?.id 냐에 따라 달라진다.

원인은?

• typescript의 연산자 처리 때문인데, !을 사용하면,

TypeScript에게 명확하게 "이 값은 반드시 존재한다"고 알려줍니다.

• ?가 있는 경우 workspace가 없다고 생각해 미리 렌더링을 진행하고, 다시 workspace.id 가 들어올때 재 렌더링되면서 캐럿이 날아가 버리는 것이였다.
• ! 가 있는경우는 workspace가 무조껀 있다고 생각해 리렌더가 일어나지 않는다.

신기하다…!