[TIL] React Hook 과제

🍩 과제 목표

• json-server 이용해 서버를 열고, CRUD에 맞춰 fetch를 이용해 서버에서 데이터 받아오거나, 추가하거나, 수정하기
• React.lazy(), Suspense 적용하기
• useNavigate, useParams 이용
• Custom Hook 만들어 적용해보기 : useFetch, useScroll

🏃 과제 진행

❓ json-server

Get a full fake REST API with zero coding in less than 30 seconds (seriously) 공식문서

json-server는 직접 DB를 만들고 서버를 구축할 필요 없이 json 파일을 이용하여 REST API 서버를 구축해주는 라이브러리이다.

REST API의 기본적인 성능은 전부 갖추고 있으나 실제 앱에 사용되는 라이브러리는 아니기 때문에 실제 앱에 json-server 라이브러리를 이용해 서버를 구축하지는 않는다고 함.
json-server는 앱의 프로토타입을 만들거나 공부를 위해 서버가 필요할 때 사용하는 용도로 이용해야 한다.

설치

//터미널에서 전역 설치 
npm i -g json-server

db.json 데이터 만들어주기

//db.json 데이터 예시 
{
  "posts": [
    { "id": 1, "title": "json-server", "author": "typicode" }
  ],
  "comments": [
    { "id": 1, "body": "some comment", "postId": 1 }
  ],
  "profile": { "name": "typicode" }
}

//과제 data.json은 이런 블로그 게시글 데이터 형태였음. 
{
  "blogs": [
    {
      "id": 2,
      "title": "박해커의 삶",
      "author": "박해커",
      "body": "오늘도 박해커는 열심히 코딩을 하네",
      "likes": 26
    },
    {
      "id": 3,
      "title": "안녕하세요?",
      "body": "반갑습니다",
      "author": "김코딩",
      "likes": 0
    }
  ]
}

과제에서는 data.json 이 이미 작성되어 있었지만, 만약 혼자 만들어 사용할 때는 직접 작성해준다.

json-server 시작해주기

json-server --watch db.json

과제에서는 —port 3001이라는 옵션을 붙여주었는데, 옵션이 없으면 json-server는 저절로 3000번 포트를 점유하고 서버를 연다.

서버가 문제 없이 열리면 터미널에는 아래와 같은 화면이 뜬다 ~~

localhost:3001 로 접속해보면

postman으로 Get 요청 보내기

포스트맨의 Workspaces에서 HTTP request를 새로이 생성하여, json-server가 만들어준 API에 GET 요청을 보내보면, json 파일에 들어있는 내용 그대로 응답을 하고 있음을 알 수 있다. (서버가 잘 만들어졌구나🤭)

💫 React.lazy(), Suspense 사용해 로딩창 구현

그냥 lazy()를 사용할 수도 있고, React.lazy()를 사용할 수도 있다.
lazy를 import 해서 사용하느냐, React 를 import 해서 사용하느냐의 차이

원래는 App.js 최상단에 import문으로 불러와주었던 Home, CreateBlog, BlogDetails, NotFound 등의 페이지들을 아래와 같이 lazy를 사용해 import 해주었다.

import { Suspense, lazy } from "react";
const Home = lazy(() => import("./Home"));
const CreateBlog = lazy(() => import("./blogComponent/CreateBlog"));
const BlogDetails = lazy(() => import("./blogComponent/BlogDetail"));
const NotFound = lazy(() => import("./component/NotFound"));

//과제시에는 페이지에 해당하는 것들에만 lazy를 적용했는데, 
//래퍼런스에서는 모든 컴포넌트들에 lazy를 적용해줌. 

//아래가 래퍼런스 코드 
import React, { Suspense } from 'react';

const Home = React.lazy(() => import("./Home"));
const Navbar = React.lazy(() => import('./component/Navbar'));
const CreateBlog = React.lazy(() => import('./blogComponent/CreateBlog'));
const BlogDetails = React.lazy(() => import('./blogComponent/BlogDetail'));
const NotFound = React.lazy(() => import('./component/NotFound'));
const Footer = React.lazy(() => import('./component/Footer'));
const Loading = React.lazy(() => import('./component/Loading'));

로딩 컴포넌트가 이미 구현이 되어 있었기 때문에 로딩 컴포넌트를 Suspense의 fallback으로 지정해줄 것이다.

지연 시 로딩 화면에 떴으면 하는 곳에 Suspense로 묶어준다.

//마찬가지로 래퍼런스 코드에서는 Navbar, Footer까지 포함해주고 있지만
//나와 페어는 페이지에 대해서만 Suspense를 적용시켰다. 
return (
    <BrowserRouter>
      {error && <div>{error}</div>}
      <div className="app">
        <Navbar />
        <div className="content">
          <Suspense fallback={<Loading />}>
            <Routes>
              <Route
                exact
                path="/"
                element={<Home blogs={blogs} isPending={isPending} />}
              />
              <Route path="/create" element={<CreateBlog />} />
              <Route
                path="/blogs/:id"
                element={<BlogDetails blogs={blogs} />}
              />
              <Route path="/blogs/:id" element={<NotFound />} />
            </Routes>
          </Suspense>
        </div>
        <Footer />
      </div>
    </BrowserRouter>
  );

☝️ useParams 이용해 개별 블로그 내용 보여주기

useParams는 리액트에서 라우터를 사용할 때 파라미터 정보를 가져와 활용하고 싶을 때 사용할 수 있는 Hook이다. (파라미터가 아닌 Pathname을 가져오고 싶을 때 사용하는 useLocation이라는 Hook도 있다.)

BlogDetail이라는 블로그 컴포넌트는 메인 화면에서 블로그 게시글을 클릭했을 때 블로그 상세화면을 띄우는 컴포넌트인데, 이 상세화면을 구현할 때 fetch로 해당 게시글에 해당하는 데이터를 불러와야한다. App.js에서 라우터를 사용해줄 때, 상세 화면으로 가는 path를 "/blogs/:id"라고 지정해주었기 때문에 fetch에도 해당 게시글의 id가 파라미터로 포함된 Url을 전달해주어야 한다. 이때 id 값을 가져올 수 있도록 하는 것이 useParams이다.

const BlogDetails = ()=>{
 
 let { id } = useParams();

 //중간생략  
  
  useEffect(() => {
    setTimeout(() => {
      fetch(`http://localhost:3001/blogs/${id}`)
      //템플릿 리터럴을 사용해서 id 값을 url에 포함시켜줌 
        .then((res) => {
          if (!res.ok) {
            throw Error("could not fetch the data for that resource");
          }
          return res.json();
        })
        .then((data) => {
          setIsPending(false);
          setBlogs(data);
          console.log(data);
          setError(null);
        })
        .catch((err) => {
          setIsPending(false);
          setError(err.message);
        });
    }, 1000);
  }, []);
 
  //생략 
}

이렇게 useParams를 이용해 받은 id는 fetch로 게시글에대한 Delete 요청을 보낼때나 patch 요청을 보낼 때도 사용할 수 있다.

블로그 상세화면에 있는 하트 버튼을 눌렀을 때 상세화면에서 하트 색이 바뀌고, 실제로 메인 화면에서도 하트 수가 표시되는 부분에 변화가 일어나도록 하기 위해서 fetch 요청을 보내줄 때 PATCH로 보내줄 수 있었는데 PUT으로 보내주었다.

PUT은 리소스의 모든 것을 업데이트 하기 때문에 래퍼런스 코드와 비교해보니... 작성한 길이에 꽤 차이가 났다. 길이가 전부는 아니겠지만, 그래도 페어가 이야기할 때 내가 PATCH를 쓰는 건 어떨까요~ 이야기해볼 수 있었다면 좋았을 거 같단 생각이 든다.

//patch 사용한 래퍼런스 코드 
const handleLikeClick = () => {
        /* 하트를 누르면 home에서 새로고침을 했을 때 숫자가 올라가야 합니다. */
        /* isLike와 blog.likes를 이용하여 handleLikeClick의 로직을 작성해주세요. */
        setIsLike(!isLike);
        let patchData = {"likes" : blog.likes + 1};
        fetchPatch('http://localhost:3001/blogs/', id, patchData);
    }


//Put을 사용한 내 코드
const handleLikeClick = () => {
    setIsLike(!isLike);
    let boll = !isLike;
    let likeData = blog.likes;
    boll ? likeData++ : likeData--;

    const putData = {
      id: blog.id,
      title: blog.title,
      author: blog.author,
      body: blog.body,
      likes: likeData,
    };

    fetch(`http://localhost:3001/blogs/${id}`, {
      method: "PUT",
      body: JSON.stringify(putData),
      headers: {
        "Content-Type": "application/json",
      },
    });
    /* 하트를 누르면 home에서 새로고침을 했을 때 숫자가 올라가야 합니다. */
    /* isLike와 blog.likes를 이용하여 handleLikeClick의 로직을 작성해주세요. */
    console.log("like!");
  };

참고로 아예 위 래퍼런스 코드에서는 fetchPatch와 같은 형태로 우리가 사용하는 API를 매서드화(?) 해서 사용했는데, 저렇게 사용하기 위해 util 폴더에 api.js 라는 api 문서를 만들어주었다.

//이런 식으로 api를 문서화 시킬 수 있습니다.


const BASE_URL = 'http://localhost:3000/';
const BLOG_URL = 'http://localhost:3000/blogs/';

export const fetchCreate = (url, data) => {
    fetch(url, {
        method: "POST",
        headers: {"Content-Type" : "application/json"},
        body: JSON.stringify(data)
    })
    .then(() => {
        window.location.href = BASE_URL;
    })
    .catch((error) => {
        console.error('Error', error);
    })
}

export const fetchDelete = (url, id) => {
    fetch(`${url}${id}`, {
      method: "DELETE",
    })
    .then(() => {
      window.location.href = BASE_URL;
    })
    .catch((error) => {
      console.error('Error', error);
    })
}

export const fetchPatch = (url, id, data) => {
    fetch(`${url}${id}`, {
      method : "PATCH",
      headers: {"Content-Type" : "Application/json"},
      body: JSON.stringify(data)
    })
    .then(() => {
      window.location.href = `${BLOG_URL}${id}`;
    })
    .catch((error) => {
      console.error('Error', error);
    })
}

🏹 useNavigate 이용해 리다이렉션 해주기

위 래퍼런스 코드의 api.js 문서를 보면 알 수 있겠지만, 리다이렉션 역시 BASE_URL을 통해서 해줬지만, 과제를 할 때는 react-router-dom의 useNavigate를 사용해주었다. (비슷하게 Link 컴포넌트가 있는데 Link 컴포넌트도 지정한 경로로 이동시켜 준다. 클릭할 경우 바로 이동하는 경우 Link 컴포넌트를 사용하고, useNavigate를 사용하는 것은 특정 행동이나 추가로 처리해야하는 로직이 있는 경우 사용)

useNavigate는 특정 행동을 했을 때 지정한 주소로 이동하게 해줄 수 있다.

과제에서는 새로운 블로그 게시글을 생성하고 나서 홈 화면으로 리다이렉트 하도록 했다.

import { useNavigate } from "react-router-dom";

const CreateBlog = () => {
  //생략 
const navigate = useNavigate();
  
const handleSubmit = (e) => {
    e.preventDefault();
    /* 등록 버튼을 누르면 게시물이 등록이 되며 home으로 리다이렉트 되어야 합니다. */
    //홈 주소를 갖도록 useNavigate 사용하기
    const postData = {
      title,
      body,
      author,
      likes: 0,
    };

    fetch(`http://localhost:3001/blogs`, {
      method: "POST",
      body: JSON.stringify(postData),
      headers: {
        "Content-Type": "application/json",
      },
    })
      .then(() => {
        navigate("/");
        window.location.reload(); //바로 새로고침 해주는 코드
      })
      .catch((err) => console.log(err));
    console.log(e.type);
  };
  
  //생략
}

🛠 Custom Hook 만들어 적용해보기 : useFetch, useScroll

useFetch

GET 메소드를 통해 데이터를 받아오는 useEffect hook은 컴포넌트 내 여기저기서 반복이 되고 있으므로 custom hook으로 만들어 보았다.

import { useState, useEffect } from "react";

const useFetch = (url) => {
  const [data, setData] = useState();
  const [isPending, setIsPending] = useState();
  const [error, setError] = useState();

  useEffect(() => {
    setTimeout(() => {
      fetch(url)
        .then((res) => {
          if (!res.ok) {
            throw Error("could not fetch the data for that resource");
          }
          return res.json();
        })
        .then((data) => {
          setIsPending(false);
          setData(data);
          console.log(data);
          setError(null);
        })
        .catch((err) => {
          setIsPending(false);
          setError(err.message);
        });
    }, 1000);
  }, []);
  return [data, isPending, error]; /* return 문을 작성해주세요. */
};

export default useFetch;

사용해보기

import useFetch from "../util/useFetch";

const BlogDetails = () => {
//BlogDetail.js 파일 속에서 get을 이렇게 짧게 바꿀 수 있다!
const [blog, isPending, error] = useFetch(
    `http://localhost:3001/blogs/${id}`
  );
}

useScroll

적용된 컴포넌트 진입시 페이지 맨 위로 스크롤해주는 기능 구현

import { useEffect } from "react";

const useScroll = () => {
  useEffect(() => {
    window.scrollTo(0, 0);
  }, []);

  return null;
};

export default useScroll;

사용해보기

사용할 컴포넌트에서 아래와 같이 넣어주기

import useScroll from "../util/useScroll";
//생략
const BlogDetails = () => {
 const scrollTop = useScroll();
//생략 
}