next.js에서 로컬스토리지를 사용할 때

안녕하세요! 이정환 강사님.
next 강의를 거의 다 수강해가는 것 같아서 배운걸 활용해 혼자 간단한 투두리스트를 구현해보고 있는데요.

새로고침 시에도 할일목록이 유지되도록 하기 위해 로컬스토리지에 저장된 목록을 가져오고

또 저장하는 로직을 작성하였더니

ReferenceError: localStorage is not defined

이와 같은 오류를 만나서 useEffect를 사용해서 아래와 같이 작성하였습니다.

// useTodo 커스텀 훅 일부 
const [todoList, setTodoList] = useState<Todo[]>([]);
 const [isLoading, setIsLoading] = useState(true);

  useEffect(() => {
    const storedTodos = getStoredTodoFromLocalStorage();
    setTodoList(storedTodos);
    setIsLoading(false);
  }, []);

  useEffect(() => {
    if (todoList.length > 0) saveTodoToLocalStorage(todoList);
  }, [todoList]);

// ToDoItemList.tsx

export default function ToDoItemList({
  isLoading,
  todoList,
  toggleTodoCompletion,
}: ToDoItemListProps) {
  if (isLoading) {
    return <S.ToDoItemList>로딩중...</S.ToDoItemList>;
  }

  if (todoList.length === 0)
    return (
      <S.ToDoItemList>
        <S.EmptyList>할일을 생성해보세요✨</S.EmptyList>
      </S.ToDoItemList>
    );

  return (
    <S.ToDoItemList>
      {todoList.map(todo => (
        <ToDoItem
          key={todo.id}
          todo={todo}
          toggleCompletion={toggleTodoCompletion}
        />
      ))}
    </S.ToDoItemList>
  );
}

처음엔 로딩상태를 만들지 않고 todolist.length가 0이면 "할일을 생성해보세요"가 보이고

아니면 할일 목록을 보여주도록 했습니다.

하지만 그렇게 하니까 할일 목록을 작성하고 새로고침을 누르면 "할일을 생성해보세요"가 잠깐 나타나고

기존에 작성한 할일 목록이 나타나더라구요...

그래서 로딩중을 추가했는데 이제는 이 투두리스트에 처음 접근한 사람도 아직 아무 데이터도 없는데

로딩중이 보이고 할일을 생성해보세요가 나타나게 되는 문제에 직면했습니다.

이러한 로직은 어떻게 다루어야 좋을까요??

제가 의도했던 건

• 처음 투두리스트 작성하려는 유저에겐 "할일을 생성해보세요"가 바로 보이고, 할일을 작성하면 할일목록을,

   

  새로고침을 해도 할일목록을 보여주기

• 이전에 작성한 투두리스트가 있는 유저에겐 할일 목록을 보여주고 새로고침을 해도 그대로 유지해서 보여주기

   

인데 어떻게 해결할 수 있을지 모르겠습니다...🥲