restaurant 객체가 비어있어 map이 작동이 안될때

restaurant 객체를 fetch로 가져오는데 시간이 걸린다. 그 시간동안 출력할 객체 데이터가 없다. 그래서 에러가 떴다. 에러를 없애기 위해서 객체가 없는 경우에 출력할 것이 필요하다. 어떻게 할까?
내가 알고 배운 3가지 방법이 있다.

1. 초기값을 만들어둔다.(내가 사용한 방식)(양식은 그대로 데이터만 비어보인다.)

restaurant:{
      name:"",
      address:"",
      menuItems:[],
}

2. restaurant가 비어있는 경우에 로딩중을 띄운다.

if(Object.values(restaurant).length === 0)
  return <div>로딩중<div>

3. !restaurant 의 경우를 만든다.(강의내용)(근데 왜 나는 이게 안될까)

if(!restaurant)
  return <div>로딩중<div>