api로 가져온 코인시세 리스트 어떻게 사용할 수 있습니까

[SunNacho]

사진처럼 api 가져오고 콘솔창에 주식리스트 뜨는 것 까지 확인 했는데요, 이걸 어떻게 써야 할지 모르겠습니다. stock 변수에 respone 할당해서 써보려했는데 잘 안되네요

[akh9804]

보통 React 컴포넌트에서 API 호출은 요런 식으로 처리하는 걸로 알고 있어요.

function StockList() {
  const [stocks, setStocks] = useState([]);

  useEffect(() => {
    async function fetchStocks() {
      const response = await fetch('...', options);
      const newStocks = await response.json();

      setStocks(newStocks);
    }

    fetchStocks();
  }, []);

  return ...
}

그런데 우리는 react-query를 사용할 것이라 이 예제를 참고하면 좋을 것 같아용.

https://codesandbox.io/s/github/tannerlinsley/react-query/tree/v3/examples/nextjs?file=/pages/index.js

[SunNacho]

말씀해 주신걸로 한 번 해봤는데요, 화면에 왜 아무것도 안뜰까요? ㅠ.ㅠ 뭘 잘못하고 있는걸까용

그리고 추가적으로 궁금한것이, console.log(response) 줄을 지웠는데도 계속 콘솔창에 종목리스트가 뜨네요, 이유가 뭘까요? 제가 셋팅을 잘 못한 걸까요?

[SunNacho]

와 지금 와서 보니까 그냥 stocklist에 뭘 적어도 반영이 안되네요 뭐지?? 왜 이러죠..머가 문제야!!!!서버 컨트롤+C로 종료했다 재시작해도 자꾸 저화면이네요 ㅜㅜㅜ힝

[HojinAn]

사진처럼 api 가져오고 콘솔창에 주식리스트 뜨는 것 까지 확인 했는데요, 이걸 어떻게 써야 할지 모르겠습니다. stock 변수에 respone 할당해서 써보려했는데 잘 안되네요

이래서 비동기 처리하는 게 js에서 어려운건데 ㅎㅎ 일단 이 코드에서는 response를 then 밖에서 사용할 수 없어용! 의도는 알겠지만 ㅎㅎ
그래서 처리할 함수를 then의 콜백 함수로 넣어줘야 하고 컴포넌트 안에서 처리해줘야 한답니다

[HojinAn]

보통 React 컴포넌트에서 API 호출은 요런 식으로 처리하는 걸로 알고 있어요.

function StockList() {
  const [stocks, setStocks] = useState([]);

  useEffect(() => {
    async function fetchStocks() {
      const response = await fetch('...', options);
      const newStocks = await response.json();

      setStocks(newStocks);
    }

    fetchStocks();
  }, []);

  return ...
}

그런데 우리는 react-query를 사용할 것이라 이 예제를 참고하면 좋을 것 같아용.

https://codesandbox.io/s/github/tannerlinsley/react-query/tree/v3/examples/nextjs?file=/pages/index.js

https://codesandbox.io/s/github/tanstack/query/tree/main/examples/react/nextjs?from-embed 이 링크를 참고하는 것도 좋을듯! 최근에는 v4여서

[HojinAn]

와 지금 와서 보니까 그냥 stocklist에 뭘 적어도 반영이 안되네요 뭐지?? 왜 이러죠..머가 문제야!!!!서버 컨트롤+C로 종료했다 재시작해도 자꾸 저화면이네요 ㅜㅜㅜ힝

stocklist를 어떤 페이지에서 불러와서 사용하고 있나요?? pages 컴포넌트에서 호출해서 보고 있는거에요?? index.tsx 페이지가 어떻게 되어 있나요?

[SunNacho]

여기서 clone받은 파일 그대로에요 지금 모바일이라 띄우기가 어려운데 필요하면 index파일도 띄울게요 npm start하고 localhost:3000에서 띄운 화면인데 혹시 주소가 문제일까요

[HojinAn]

보니까 index에 StockList가 있군요 왜 안될까 그러면

각 stockItem 값을 봐야 알 듯

[SunNacho]

stockItem은 위사진에 있는게 끝입니당 흑

[akh9804]

흠 key={i} 부분을 빼면 동작하나요? i가 정의되어 있지 않은 것 같아서 그런건가 싶기도 하네염

[HojinAn]

오 그런거 같기도 하네요 ㅋㅋ

[HojinAn]

머지가 안되어 있어서 jsx 상태였어서 컴파일 에러를 체크를 못해준듯

[SunNacho]

헐....말도안돼..이따 해볼게요