[React] state의 list가 undefined로 인식돼서 find가 동작하지 않을 때

 

문제점

 

리액트 웹 개발 도중 state의 list가 undefined되어서 find가 동작하지 않는 오류가 나왔다.

 

기본적으로 find는 빈 리스트에서는 실행오류가 난다. 오류의 이유는 리스트에 값이 채워지지 않았기 때문이다.

 

result=[
    {
        "grade": 1,
        "count": 0
    },
    
    ... (중략)
    
    {
        "grade": 9,
        "count": 0
    }
]

 

HTTP GET으로 위의 데이터를 불러와서 

 

(9) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}]
0: {grade: 1, count: 0}
1: {grade: 2, count: 0}
2: {grade: 3, count: 0}
3: {grade: 4, count: 0}
4: {grade: 5, count: 0}
5: {grade: 6, count: 0}
6: {grade: 7, count: 0}
7: {grade: 8, count: 0}
8: {grade: 9, count: 0}
length: 9
__proto__: Array(0)

 

위처럼 리스트에 넣어서 find로 grade에 해당하는 count를 찾아 화면에 뿌려주는 구현이였다.

 

this.state.winnerCounts.raffleWinningCount.find((res) => res.grade === 1).count

 

find가 동작하지 않았고, raffleWinningCount라는 리스트의 크기가 0이라는 오류였다.

 

 

 

원인

 

HTTP GET으로 데이터를 불러오기 전에 테이블에 데이터를 뿌려주는 코드가 실행돼서 난 오류였다.

 

화면이 실행될 때 HTTP GET으로 데이터를 가져온 후 테이블에 데이터를 뿌리는 플로우인데, 

 

비동기식이라 테이블 생성과 HTTP GET이 동시에 이뤄지고, 데이터 반환은 서버를 갔다오기 때문에 테이블 생성보다

 

늦을 수 밖에 없어서 난 오류였다.

 

 

 

해결

 

앞에 [리스트 객체] && 를 두어서 리스트 객체가 온전히 불러와졌을 때 데이터가 뿌려지는 코드가 진행되게 수정했다.

 

잘 돌아갔다.

 

this.state.winnerCounts.raffleWinningCount 
 && this.state.winnerCounts.raffleWinningCount.find((res) => res.grade === 1).count

 

 

배운점

 

비동기 코드 진행방식을 이해하고, 백과 프론트의 작업이 비동기로 이뤄질 때 백의 작업이 더 느릴 수 밖에 없으므로

 

프론트 구현 시 데이터 수신의 유무를 꼼꼼히 따져서 동기화한 코드를 작성해야 한다는 것을 배웠다.