Closed SunNacho closed 1 year ago
보통 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
를 사용할 것이라 이 예제를 참고하면 좋을 것 같아용.
말씀해 주신걸로 한 번 해봤는데요, 화면에 왜 아무것도 안뜰까요? ㅠ.ㅠ 뭘 잘못하고 있는걸까용
그리고 추가적으로 궁금한것이, console.log(response) 줄을 지웠는데도 계속 콘솔창에 종목리스트가 뜨네요, 이유가 뭘까요? 제가 셋팅을 잘 못한 걸까요?
와 지금 와서 보니까 그냥 stocklist에 뭘 적어도 반영이 안되네요 뭐지?? 왜 이러죠..머가 문제야!!!!서버 컨트롤+C로 종료했다 재시작해도 자꾸 저화면이네요 ㅜㅜㅜ힝
사진처럼 api 가져오고 콘솔창에 주식리스트 뜨는 것 까지 확인 했는데요, 이걸 어떻게 써야 할지 모르겠습니다. stock 변수에 respone 할당해서 써보려했는데 잘 안되네요
이래서 비동기 처리하는 게 js에서 어려운건데 ㅎㅎ 일단 이 코드에서는 response를 then 밖에서 사용할 수 없어용! 의도는 알겠지만 ㅎㅎ
그래서 처리할 함수를 then의 콜백 함수로 넣어줘야 하고 컴포넌트 안에서 처리해줘야 한답니다
보통 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/tanstack/query/tree/main/examples/react/nextjs?from-embed 이 링크를 참고하는 것도 좋을듯! 최근에는 v4여서
와 지금 와서 보니까 그냥 stocklist에 뭘 적어도 반영이 안되네요 뭐지?? 왜 이러죠..머가 문제야!!!!서버 컨트롤+C로 종료했다 재시작해도 자꾸 저화면이네요 ㅜㅜㅜ힝
stocklist를 어떤 페이지에서 불러와서 사용하고 있나요?? pages 컴포넌트에서 호출해서 보고 있는거에요?? index.tsx 페이지가 어떻게 되어 있나요?
여기서 clone받은 파일 그대로에요 지금 모바일이라 띄우기가 어려운데 필요하면 index파일도 띄울게요 npm start하고 localhost:3000에서 띄운 화면인데 혹시 주소가 문제일까요
보니까 index에 StockList가 있군요 왜 안될까 그러면
각 stockItem 값을 봐야 알 듯
stockItem은 위사진에 있는게 끝입니당 흑
흠 key={i}
부분을 빼면 동작하나요? i가 정의되어 있지 않은 것 같아서 그런건가 싶기도 하네염
오 그런거 같기도 하네요 ㅋㅋ
머지가 안되어 있어서 jsx 상태였어서 컴파일 에러를 체크를 못해준듯
헐....말도안돼..이따 해볼게요
사진처럼 api 가져오고 콘솔창에 주식리스트 뜨는 것 까지 확인 했는데요, 이걸 어떻게 써야 할지 모르겠습니다. stock 변수에 respone 할당해서 써보려했는데 잘 안되네요