mongtak
20
2020-09-16 15:19:03 작성 2020-09-16 15:20:24 수정됨
4
131

React state 관련 질문입니다.



오픈 API를 이용하여 React 영화 사이트를 만들고 있습니다.


위 사진은 state의 값이 비어있을경우 loading 화면을 띄워 기다리게 하고

componentDidMount 에서 데이터를 불러와 setState 함수로 저장후 

다시 render함수를 호출할때 state값이 존재하면 Movie 컴포넌트를 렌더하려고 합니다.


여기서 문제는 console.log로 this.state의 값을 보면 정상적으로 작동을 하게 되는데

render함수 위에 변수를 설정하고 this.state를 넣어주면 undefined가 출력이 됩니다.


왜 undefined가 출력이 되는지 의문입니다..


짐작이 가는것은 async 때문인거 같은데 아무리 찾아보고 해결하려해도 되지 않아서 질문 드립니다.


0
  • 답변 4

  • 초보자1212
    1k
    2020-09-16 15:22:40

    state 엔 ratingMovies 로 넣으시는데

    뺄 때는 movies 를 빼시네요

  • 초보자1212
    1k
    2020-09-16 15:24:13

    사용하신 async 는 오히려 매우 잘하신 방법입니다.

    await 를 this._get... 에 각각 걸지 않고

    밑에서 한 번에 저렇게하는게 병렬처리로 더 좋은 성능을 기대할 수 있죠. 잘하신겁니다.

    setState 에서 ratingMovies: movies 로 넣으시거나 

    render 내부에서 뺄 때

    { ratingMovies: movies } = this.state

    로 하시거나 하여튼 이름을 다르게 사용하셔서 그런겁니다

  • mongtak
    20
    2020-09-16 15:32:33 작성 2020-09-16 15:42:31 수정됨

    와 정말 감사합니다. 

    엉뚱한곳에서 헤매고 있었네요 ㅜ..

    { movies } <= 이것을 제대로 이해하지 못하고 사용해서 그랬었군요..


    저는 state의 값이 비었는지 안비었는지 확인하기 위해서만 필요해서 

    단지 변수를 선언하여  state를 할당시켜서 확인하려고 했는데


    const { movies } = this.state; 는

    state안에 movies라는 변수를 불러와 거기에 할당시킨다는 뜻이군요!


    수정 )

    setState에서 movies : [ratingMovies, downloadCountMovies, likeCountMovies ]

    이렇게 저장하여 

    const { movies }  = this.state; 로 바꿔서 해결하였습니다 ㅎ


    감사합니다!


  • 초보자1212
    1k
    2020-09-16 15:51:47

    음, 오히려 바꾸신 코드는 조금 안티패턴스러운데요..

    https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment

    를 탐독해보시고 다시 생각해보시는 걸 추천드립니다 ~ ^^

  • 로그인을 하시면 답변 을 등록할 수 있습니다.