인프런 커뮤니티 질문&답변

냠냠굿

작성한 질문수

[리뉴얼] React로 NodeBird SNS 만들기

swr 사용해보기

SWR 데이터 반환 형식 문의

작성

431

import React from 'react';

import axios from 'axios';

import useSWR from 'swr';

import { Row } from 'antd';

import styled from 'styled-components';

import AppLayout from '../components/AppLayout';

// const fetcher = (url) => axios.get(url, { withCredentials: true }).then((result) => result.data);

const Square = styled.div`

align : center;

width : 180px;

height : 160px;

border : 2px solid lightgrey;

border-radius : 0.5em;

text-align : center;

align-content : center;

font-size : 2em;

margin : 5px;

const fetcher = (url) => axios.get(url, {withCredentials:true}).then((result)=>result.data);

const StatusView = () => {

console.log('ttttttttteste');

const { data: sata, error: town1Error } = useSWR(`http://localhost:3065/town1/10`, fetcher);

console.log(sata);

if (town1Error) {

console.error(town1Error);

return <div>타운1 로딩중 에러가 발생합니다.</div>;

}

//const sata ='ssssssssss';

return (

배터리전압 : {JSON.stringify(sata.id)}

</Square>

모터 ON/OFF 상태 : 111

</Square>

모터동작전류 : 111

</Square>

</Row>

</>

);

};

export default StatusView;

sata 에 들어오는 데이터 형식은

{"id":1,"town1":"고암모산동","createdAt":"2021-03-15T10:01:17.000Z","updatedAt":"2021-03-15T10:01:17.000Z","UserId":1,"CityId":1}

이런식으로 들어옵니다.

백엔드 서버에서 크롬주소창에서 요청을 하면 정상적으로 데이터 들어오는거 확인된 상태입니다. 위에 코드를 실행하면 SWR을 사용하여 받아온 데이터를 배터리 전압 부분에 sata를 사용하면 배열을 사용한 데이터라 표현이 안된다는 에러가 나옵니다.

이 상태에서{ JSON.springfy(sata)} 로 표현하면 SWR로 받아온 데이터를 다 뿌려줍니다. 이 상태에서 { JSON.springfy(sata.town1)} 하면 "고암모산동" 이렇게 출력이 됩니다. 이 상태에서 서버를 다 껐다가 다시 재가동 시키면 town1이 undefined라는 오류가 나오면서 실행이 안됩니다.

여러모로 콘솔창 찍어보면서 봤는데 sata 부분에 데이터 형식이 맞지 않아서 오류가 나는거 같은데, 제로초님께서는 어떻게 생각하시는지 궁금합니다. 좋은 하루 되세요!

Next.js nodejs redux express react

답변 1

제로초(조현영)

지식공유자

뭐가 문제라고 하시는 건지 이해를 못하겠습니다.

냠냠굿

질문자

브라우저에서 랜더링하는 부분에서 배터리 전압 부분에 SWR로 받아온 데이터 변수명이 sata인데요. {sata}로 적고 페이지를 불러오면

이런 에러가 나오고 콘솔창에는

이런식으로 StatusView가 두번 실행되는거 처럼 나옵니다. 처음에는 데이터를 못 받아와서 undefined라는게 출력이 되고 데이터 타입 확인하는 콘솔창도 데이터가 없으니 undefined가 출력이 되는거 같습니다. 그러다가 무슨 이유에서인지 StatusView가 다시 실행이 되면서 그 때는 데이터가 받아와져서 콘솔창에 찍히고 데이터타입도 객체라고 나오는거 같습니다.

이 상황에서 {sata.id} 이렇게 변경해보면, id가 undefined라는 에러가 나옵니다. 저는 SWR로 디비에는 데이터를 읽어와서 페이지에 원하는 데이터 값을 보이게 하고 싶은데 이런 문제가 생기네요.

제로초(조현영)

지식공유자

{sata}는 당연히 안 됩니다. 그 자리에 객체를 못 넣거든요. swr은 특성상 sata가 undefined인 구간(로딩중)도 있으므로 sata.id에서 에러가 날 수도 있습니다.

냠냠굿

질문자

정보 감사합니다. 로딩중에 데이터가 없으니 에러 화면을 띄우는 점을 아래에 if(!sata) {return <div></div>} 코드를 추가하니 로딩중까지는 div 태그 사이에 적어둔 글자가 잠시 떴다가 로딩이 완료되면서 아래에 배터리 전압 부분에 원하는 데이터가 정상적으로 표현이 되는것을 확인했습니다. 그 순간이 찰나여서 동작코드에는 빈태그만 넣어서 눈속임을 한 상태입니다.

동작에는 문제가 없는거 같지만 StatusView에 if문을 여러개 사용해도 문제는 없을까요?

const fetcher = (url) => axios.get(url, {withCredentials:true}).then((result)=>result.data);
console.log('tetstsetstetstsetststest');
const StatusView = () => {
  console.log('ttttttttteste');
  const { data: sata, error: town1Error } = useSWR(`http://localhost:3065/town1/5`, fetcher);
  console.log(sata);
  console.log(typeof(sata));
  if (!sata) {return <div></div>}
 if (town1Error) {
    console.error(town1Error);
    return <div>타운1 로딩중 에러가 발생합니다.</div>;
  }
  
  return (
    <>

      <AppLayout />

      <Row style={{ margin: 10 }} align="middle" gutter={20}>

        <h1>배터리전압 : {sata.town1}</h1>
       
        <Square>
          모터 ON/OFF 상태 : 111
        </Square>
        <Square>
          모터동작전류 : 111
        </Square>
      </Row>
    </>
  );
};

export default StatusView;

제로초(조현영)

지식공유자

네 괜찮습니다. 다만 return 아래에 use로 시작하는 훅이 있으면 에러가 발생합니다.

냠냠굿

질문자

조언 정말 감사합니다. 강의 보면서 앱 완성 해보겠습니다. 좋은 하루 되십쇼!

냠냠굿

작성한 질문수

전체 Q&A

질문하기