리액트는 브라우저에서 모든 컴포넌트가 준비됐을 때 DOM에 컴포넌트를 뿌려준다.
따라서 위와 같이 데이터를 서버에서 받아와 뿌려주는 코드가 있는 경우 해당 컴포넌트의 준비 시간 때문에 다른 컴포넌트까지 그려지지 못하는 경우가 발생할 수 있다.
이런 경우, 삼항 연산자를 사용하여 서버에서 데이터를 받아오는 시간은 loading 메시지를 표시하여 해당 컴포넌트 때문에 준비 된 컴포넌트가 (굳이..?) 대기를 하는 경우는 막아주는 것이 좋은 것 같다.
또한 위와 같은 코드는 피해야 하며, 중복되는 부분은 ITEM 컴포넌트를 따로 만든 후 probs로 id, name, skill 등을 넘겨주는 방향이 가독성과 성능 면에서 더 좋다.
'React.js' 카테고리의 다른 글
| [React] Components handleDelete 처리 (0) | 2022.01.28 |
|---|---|
| [React] React-Query를 사용할 때 (0) | 2022.01.25 |
| [React] React-Query 쿼리무효화, queryClient.invalidateQueries() (0) | 2022.01.20 |
| [React] React-Query 사용하기 (0) | 2022.01.20 |
| [React] Cannot read properties of undefined... Error (0) | 2022.01.19 |