리액트 useState 질문입니다!

Question

리액트에서 axios로 데이터를 가져오고가져온 데이터를 useState에 넣어서 화면에 출력을 하였습니다.여기서 화면을 새로고침 할 때마다 useState의 초기값이 나타났다가 가져온 데이터가 출력이 되는것을 확인했습니다.useState의 초기값이 빈 배열이기에 새로고침 마다 빈 화면을 보여주고 이 후 데이터를 보여줘서 데이터가 깜박이는 현상이 생겨화면 paint 전에 데이터를 가져오기 위해 useLayOutEffect를 써봤지만 잘 되지 않더군요 ㅠㅠ이를 해결하는 방법이 있을까요?

코드한보따리삼천원 · Answer

저는 데이터가 오기 전까지 로딩바나 로딩써클을 크기에 맞게 넣어두고, 데이터가 오면 스무스하게 넣어주는 식으로 구축했었습니다.상황에 따라 데이터가 늦는 경우(연산 절차가 많은 데이터 등을 받을 때)도 있어서, 해당 경우 무작정 빈 화면인 상태로 기다리게 할 수는 없다 보니, 고객한테 데이터가 오는 중이라는 걸 직관적으로 보여줄 수도 있어서 괜찮더라구요.데이터 요청하면서 대기중 스테이트로 변경하시거나, 기본 값으로 대기중 스테이트를 넣어두시고, 데이터가 왔을 때 then에서 풀어주시는 거죠.가끔 보면 이런 사이트들이 더러 있습니다. 서버사이드가 아닐 경우에는 어쩔 수 없는 부분도 있고, 당장 인스타 트위터 등을 보시면 로딩까지 프로그레스를 보여주는 경우가 많잖아요? 저도 어떻게 해결하지~ 하고 고민하다가 인스타를 켰는데 '오...' 하면서 그냥 그렇게 적용했습니다.상황에 맞는 답변이 되었는지는 모르겠네요 ㅎㅎ

잣댐스키 · Answer

초기화면은 loading spanner, 스켈레톤 등 다양하게 처리하는 방법이 있습니다.

리액트 useState 질문입니다!

2개의 답변

#usestate 목록