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

Home.jsx

이렇게 하고

import { useEffect, useState } from 'react';
import HomeDataLength from '../components/HomeDataLength.jsx';
import HomeSearch from '../components/HomeSearch.jsx';
import CanvasItemList from '../components/CanvasItemList.jsx';
import SearchBar from '../components/SearchBar.jsx';
import GridFlexBTN from '../components/GridFlexBTN.jsx';
import { deleteHome, createHome, getHome } from '../api/home.js';
import { v4 as uuid } from 'uuid';
import dayjs from 'dayjs';

export default function Home() {
  const [isGrid, setIsGrid] = useState(true);
  const [search, setSearch] = useState('');
  const [data, setData] = useState([]);
  const [isLoading, setIsLoading] = useState(false);
  const [error, setError] = useState(false);

  useEffect(() => {
    const api = async () => {
      setIsLoading(true);
      setError(false);
      try {
        const response = await getHome('');
        setData(response.data);
      } catch (err) {
        setError(err);
      } finally {
        setIsLoading(false);
      }
    };
    api();
  }, []);

  const [isLoadingCreate, setIsLoadingCreate] = useState(false);
  const [createError, setCreateError] = useState(false);
  // 등록버튼 누르면 새로운 데이터 저장
  const handleNewCreate = async () => {
    // setIsLoadingCreate(true);
    // setCreateError(false);
    // try {
    const id = uuid();
    const newCreate = {
      id,
      date: dayjs().format('YYYY-MM-DD HH:mm:ss'),
      text: `${id.substring(0, 4)}-테스트`,
      category: '테스트',
    };
    await createHome(newCreate);
    console.log(123);

    // const res = await getHome();
    // setData(res.data);
    // } catch (err) {
    // setCreateError(err);
    // console.log(createError, 'createError');
    // } finally {
    // setIsLoadingCreate(false);
    // }
  };

  const handleText = text => {
    const searchData = data.filter(d =>
      d.text.toLowerCase().includes(text.toLowerCase()),
    );
    if (searchData.length === 0) {
      setSearch(null);
    } else {
      setSearch(searchData);
    }
  };

  const handleDelete = async id => {
    // const newData = data.filter(d => d.id !== id);
    // setData(newData);
    await deleteHome(id);
  };

  return (
    <>
      <>
        <div className="flex flex-col md:flex-row justify-between items-center">
          <button
            className="hover:bg-blue-400 bg-blue-500 text-white rounded-md text-bold p-3"
            onClick={handleNewCreate}
          >
            등록하기
          </button>
          {isLoadingCreate && <p>등록중</p>}
          {createError && <p>{createError}</p>}
          <SearchBar handleText={handleText} />
          <GridFlexBTN setIsGrid={setIsGrid} isGrid={isGrid} />
        </div>

        <HomeDataLength data={data} error={error} isLoading={isLoading} />
        <HomeSearch search={search} />

        {!isLoading && !error && (
          <CanvasItemList
            data={data || []}
            search={search}
            isGrid={isGrid}
            handleDelete={handleDelete}
          />
        )}
      </>
    </>
  );
}

home.js 파일은 아래와 같은 상태이면

import { home } from './http';

// 목록 조회
export const getHome = () => {
  return home.get('/');
};

// 등록
export const createHome = newCreate => {
  try {
    console.log('ㅅㅣ작');
  } catch (error) {
    console.log('에러');
  } finally {
    console.log('종료');
  }
  // debugger;
  return home.post('/', newCreate);
};

// 수정

// 삭제
export const deleteHome = id => {
  return home.post('/', id);
};

db는 server-json을 사용하고 있습니다.

그런데 get 요청을 할때는 잘 작동하는데

post로 등록하거나 삭제할때는 db에 정상 등록, 삭제되는데 화면이 새로고침이 되버리는 상태입니다. Home.jsx 화면이 리렌더링이 되도록 하고싶은데 새로고침은 왜 그런지 모르겠습니다.

postman으로도 post로 db에 저장했는데 리액트 화면이 자동으로 새로고침 되버립니다. 구글링도 해봤는데 해결이 안되서 문의드립니다.

혹시나 해서 db.json이 변경되면 화면도 변경될까 싶어서 을 db.json --watch로만 해보고 --watch도 없애봤는데 안됩니다.

  const handleNewCreate = async () => {
    console.log('시작1');

    const id = uuid();
    const newCreate = {
      id,
      date: dayjs().format('YYYY-MM-DD HH:mm:ss'),
      text: `${id.substring(0, 4)}-테스트`,
      category: '테스트',
    };
    const data = await createHome(newCreate);
    console.log(data, 'data');
    console.log('시작2');
    debugger;
 
  };

debugger를 사용했을때

이렇게 데이터 나오는데 디버거 끄는 순간 바로 화면이 새로고침 되고 있습니다. 그리고 콘솔창도 새창으로 이전 내역이 다 사라지는 상태입니다.