[React] api와 소통시 초기값이 비었을 때

리액트의 라이프사이클은 constructor > render > componentDidMount 순으로 진행된다. 그런데, 나의 경우에는 fetch를 componentDidMount안에서 했기 때문에 그 전의 render에서는 state에 빈 값이 있을 수 밖에 없었고, 그러면 에러가 났다. 그래서 에러를 잡아주기 위해서는 데이터를 사용할 때 조건문을 걸어줄 필요가 있었다.

배열

this.state = {
  product: [],
}

render() {
  return(
    {product.length! == 0 ? product[0].color_name : null}
  )
}

받아오는 데이터가 배열인 경우에 배열은 길이를 측정할 수 있으므로, 배열의 길이가 0인 아닌 경우라는 조건을 걸어주면 됐다.

객체

this.state = {
  product: {},
}

render() {
  return(
    {product.name && (
     	<ProductDetailLeft
                  refArr={[this.shoeDetailRef, this.reviewRef]}
                  product={product}
     )}
  )
}

• 중간에 api의 형식을 배열에서 객체로 바꾸는 과정에서, 조건문을 어떻게 변경해야될지 고민하느라 헤멨다. 배열은 길이가 있어서 길이로 비교하면 되지만, 객체는 어떻게 해야되지? 객체가 존재하면이라는 조건을 걸어도 해결되지 않았다. 객체는 비어있어도 true이기 때문이다. 한참을 헤메다가 멘토님들의 도움을 받고, 매우 간단하게 해결해버렸다. 객체안의 특정 키를 하나 정해서 그 값의 유무로 비교하면 됐었다. 배열에서 사용한 삼항연산자도 필요없어서 논리연산자를 사용해 불필요하게 긴 코드를 짧게 만들었다.