썬이의 IT세상

데이터를 받아오기도 전에 화면이 렌더링되는 react.. 예를 들어 api를 통해 받아온 데이터를 화면에 디스플레이 해줘야 할 때, 분명 해당 데이터를 담는 state는 초기에 undefined이면 무조건 에러가 날 것이다. 그래서 데이터가 들어오면 렌더링이 되게끔 하는 가장 간단한 방법은 ... const [data, setData] = useState(); return data ? ( {data.title} ) : null ... 이런식으로 data가 들어왔을 때 렌더링이 되게끔 처리해주면 되는데, null로 처리한다면 데이터가 들어올때까지 빈 화면만 노출될 것이다. 이럴 경우엔 사용자 입장에서 움직이는 로딩 컴포넌트가 있어야 한다. 이 포스팅에서는 로딩 컴포넌트를 간단하게 만들어보는 예제를 다루려 ..