[리액트][일렉트론] mocking한 데이터 가져와 쓰기

목차

 

채팅이 올바르게 띄어진 모습

 

recoil로 만든 중앙관리 state

import { atom, selector } from "recoil";
import { LocalStorageEffect } from "./LocalStorageEffect";

interface User{
  id: number;
  name: string;
  chat: string;
  
}

export const textState = atom<User>({
  key: "textState", // unique ID (with respect to other atoms/selectors)
  default: {
    id: 0,
    name: "default name",
    chat: "default chat",
  }, 
  effects:[
    //LocalStorageEffect('textState'),
    ({onSet}) =>{
      console.log("상태 변화")
    }
  ]
});

 

모킹 받은 데이터 chathandler.tsx

// src/mocks/handlers.js
import { http, HttpResponse } from "msw";


export const chathandler = [
  // Intercept "GET https://example.com/user" requests...
  http.get("/hi", () => {
    // ...and respond to them using this JSON response.
    return HttpResponse.json({
      id: "010513",
      name: "sin",
      chat: "Hello I'm huaksu!",
    });
  }),
];

 

데이터를 불러와 fetch로 쓴 Chatting.tsx

import { useRecoilState, useRecoilValue, useSetRecoilState } from "recoil";
import { textState } from "./recoil/ChattingAtom";
import { ReactElement, useEffect, useState } from "react";
import styled from "styled-components";

const Styledfont = styled.div`
  color: green;
`;

interface User{
  id: number;
  name: string;
  chat: string;
}

function Chatting() {
  const [text, setText] = useRecoilState<User>(textState);

  useEffect(() => {
    fetch('http://localhost:3000/hi')
      .then(response => response.json())
      .then(data => {
        setText(data);
      })
      .catch(error => {
        console.log("수신 실패");
      });
  }, []);
  return <Styledfont>{text.chat}</Styledfont>;
}

export default Chatting;

 

json전달 할때 객체를 잘 전달해주자 객체 잘못 전달해서 몇 시간을 태운지 모르겠다..