[React] 데이터 로딩과 렌더링 작업속도차이 문제

 

오늘 아래와 같은 상세페이지 작업을 하던 와중에 변수들이 대거 undefined 오류 문제를 발생시켰다.

 

 

음.. 왜 그럴까?

 

 

문제는 데이터 로딩 속도와 렌더링 작업 속도의 차이 때문이었다. 

 

작업 속도라기보다는 비동기 문제가 더 정확한 워딩인 듯하다. 

 

즉, 상세페이지를 위한 이미지와 정보를 불러오는 와중에 자바스크립트 엔진은 html을 렌더링 해버리기 때문에 

 

아직 데이터가 넘어오지 않아 변수 선언 및 할당에 문제가 발생하는 것이다. 

 

나는 아래와 같이 삼항 연산자를 이용해 넘겨주는 데이터가 정의되었을 경우에만 props를 내려주는 방식으로 해결했다. 

 

<UpperContainer>
        <span className='image'>{accommodationDetail ? <AccommodationImage source={accommodationDetail} /> : null}</span>
        <span className='desc'>{accommodationDetail ? <AccommodationDesc source={accommodationDetail} /> : null}</span>
</UpperContainer>