[TIL] 2023-06-29 객체 형태의 데이터 초기화 관련

API 받아와서 그 정보를 화면에 나타나게만 하면 되는 아주 쉬운 페이지였는데...
다른 것들은 괜찮은데 depth가 좀 있는 데이터를 뺄 때 오류가 나서 미쳐가고 있었다...

데이터의 형태는 이러했다.

{
  contact [
    {
      name: 'name',
      email: 'email',
      phoneNumber: 'phoneNumber'
    }
  ]
}

문제는 뭐였냐면... 여기 ? <- 이걸 쓸 수 없는 버전이라서 render 부분에서 뺄려면 페이지가 로딩될 때 무조건 한 번은 null이 오니까 초기화를 안 하면 망가지는 거였다.
무엇보다 쟤를 결국 어떻게 빼야 했는가?!

// 리덕스에 담겨있는 정보 받아 옴
const { propsInfo } = this.props;
// 거기서 내가 원하는 Info 를 빼면서 초기화를 시킴
const { Info } = propsInfo || {};
// Info에서 원하는 contact를 빼서 초기화를 시킴
const { contact } = Info || {};
// contact 자체에 바로 접근할 수 없기 때문에 다시 빼주고
// 드디어 contactInfo로 접근할 수 있게 됨...!
const contactInfo = contact || [];

사실 맨 처음에는

const { contact: contactInfo = [] } = Info || {};

이렇게 했는데, 원래... 이렇게 해도 초기화 되는 거 아닌가?!
근데 안 되더라고.
그래서 한 번씩 다 빼주면서 초기화 해서 됐다...
힘들었다...

?의 위대함을 느꼈던 하루...