dongminkim
20
2021-04-18 15:23:14
7
129

React 비동기 처리 간단한 질문 드립니다!! ㅠ


 안녕하세요 선배님들 리액트 공부중에 막히는 부분이 있어 질문드립니다.

App 컴포넌트 안에서 async를 이용해서 서버에 있는 json을 불러와서 비구조할당을 통해 필요한 데이터만 추출 후


추출한 데이터를 이용해서 화면에 출력하고 싶은데요

출력할 때는 map을 이용해서 하려고 합니다. 

그래서 다음과 같이 코드를 작성해 봤는데 

async를 선언한 함수를 어디서 불러와야 할까요?

이 함수 처리하는 방법을 모르겠네요,,

아니면 이런 식으로 json을 불러와 화면에 출력하고 싶을 때 다른 방법이 있을까요?


선배님들 조언 부탁드리겠습니다.!!










0
  • 답변 7

  • godtmsus
    30
    2021-04-18 15:26:40

    useState훅을 이용하여 data를 state로 설정하시고

    useEffect에서 비동기 처리 후 state 재 설정 하셔서 리렌더링 하시는 방향으로 해보시면 어떨까요?

  • dongminkim
    20
    2021-04-18 17:23:03

    답변 감사합니다. 혹시 저 코드를 예를 들어 보여주실 수 있으신가요? 도통 감히 안잡히네요 ㅜ

  • godtmsus
    30
    2021-04-18 18:49:28


    const getQuizes = async () => {
      const [data, setData] = useState(null);
    
      useEffect(() => {
        setData(axios.get(...));
      }, []);
    
      ...
      
    }

    이런식으로 함수형 컴포넌트 hook 에 대해 찾아보시면서 구현해보시면 어떠실까요?

  • dongminkim
    20
    2021-04-18 20:16:06

    답변 감사합니다! 선생님께서 말씀하신대로 useEffect와 useState를 통해 구현해봤는데요!!

    이대로 npm start를 해보았더니

     

    quizzes.map이 정의된 함수가 아니라고 나와요 

    밑에 오류는 무엇을 뜻하는지는 잘 모르겠네요 !! 거의 다 온거 같은데 !!


  • godtmsus
    30
    2021-04-18 20:25:23

    테스트 배열로 map 을 이용한 렌더링을 해보시고

    quizzes data 가 배열 형식으로 잘 들어오는지 확인해보셔서 디버깅해보시면 좋을거같아요!

  • dongminkim
    20
    2021-04-18 22:10:39

    quizzes가 객체형태라 비구조할당을 통해 배열로 되어 있는 곳까지 들어가서 해봤지만..

    도저히 감이 안잡히네요 ㅠ

  • godtmsus
    30
    2021-04-18 22:57:53

    map 함수는 결국 배열을 리턴하는걸 알아두신다면

    객체 속성을 iterable하게 반복하면서 알맞은 배열을 만들어서 리턴하시면 되실겁니다!

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