1. 문제 현상

---

• imageData에 담겨있는 imageUrl의 값을 사용해야 하는데 접근을 할 수 없었다.

export interface UserData {
  id: number;
  nickname: string;
  email: string;
  password: string;
  imageUrl: string;
}

const [imageData, setImageData] = useState<UserData[]>([]);

const getImageData = async () => {
  try {
    const res = await axios.get(`http://localhost:3001/user/1`);
    setImageData(res.data);
  } catch (err) {
    console.error(err);
  }
};
useEffect(() => {
  getImageData();
}, []);

...

<Profile src={imageData.imageUrl} alt='헤더 프로필 이미지' />

2. 문제 원인

---

• 분명 imageUrl을 String으로 타입 지정을 해줬는데 자바스크립트에서는 멀쩡히 되던게 안 되니 처음에는 도저히 원인을 찾지 못했었다..

• 그러다 가만히 생각해 보니 User 테이블의 데이터 전체를 불러오는 게 아니라 특정 id의 객체만 불러오는 것이니 지금 state의 기본 값이 배열로 되어 있어서 문제가 되는 게 아닐까라는 생각을 하게 되었다.

3. 문제 해결

---

• 그래서 state의 타입과 초기값에서 []을 빼주었다.

• 이렇게 하면 해결될 줄 알았는데 이번에는 imageData가 undefined라는 에러가 또 발생했다;;

• 혹시 imageData를 불러오기도 전에 렌더링을 시도해서, 즉 아직 imageData state에 아무 값도 담기지 않아서 그런가 싶어 && 연산자를(또는 옵셔널 체이닝 연산자 ?.) 추가해서 다음과 같이 imageData && imageData.imageUrl imageData가 true일 때의 조건을 추가해 주었더니 마침내 에러 없이 정상적으로 값을 불러올 수 있었다.