S4) Unit 4. [실습] Custom Hook

📣  React Custom Hook 을 사용해서 블로그 화면 구현해보기

𝟭. 구현 조건

1️⃣ Bare Minimum

• App 루트 컴포넌트(App.js)
  • react.lazy()와 suspense를 사용하여 컴포넌트를 리팩토링합니다.
• BlogDetail 컴포넌트(BlogDetail.js)
  • 현재는 개별 블로그 내용으로 진입해도 내용이 보이지 않습니다.
    • useParams()을 이용하여 개별 id를 받아와 개별 블로그의 내용이 보일 수 있도록 해봅니다.
  • delete 버튼을 누르면 다시 home으로 리다이렉트 되어야 합니다.
    • useNavigate()를 이용하여 handleDeleteClick 함수의 로직을 작성해주세요.
  • 하트를 누르면 home에서 새로고침을 했을 때 숫자가 올라가야 합니다.
    • isLike와 blog.likes를 이용하여 handleLikeClick함수의 로직을 작성해주세요.
  • isLike에 의해 조건부 렌더링으로 빨간 하트(❤️)와 하얀 하트(🤍)가 번갈아 보여야 합니다.
• CreateBlog 컴포넌트(CreateBlog.js)
  • 등록 버튼을 누르면 게시물이 등록이 되며 home으로 리다이렉트 되어야 합니다.
  • fetch와 useNavigate를 이용하여 handleSubmit 이벤트를 완성해봅니다.
• UseFetch 컴포넌트(UseFetch.js)
  • GET 메소드를 통해 데이터를 받아오는 useEffect hook은 컴포넌트 내 여기저기 존재하고 있습니다.
  • 해당 hook은 반복이 되는 부분이 있으므로 어떻게 custom hook으로 만들 수 있을 지 고민해봅시다.
  • util 폴더 내에 존재하는 useFetch에 custom hook을 작성해주세요.
    • useState를 이용하여 data, isPending, error를 정의하세요.
    • useFetch 안의 중심 로직을 작성해주세요.

2️⃣ Advanced

• 블로그 글 클릭해서 들어갔을 때 스크롤 맨 위로 적용되는 기능 구현하기
  • 적용된 컴포넌트 진입시 페이지 맨 위로 스크롤해주는 기능을 구현해볼 수 있습니다.
  • 이 기능 또한 useEffect를 이용해 구현할 수 있으므로, custom hook으로 만들기 적절합니다.
  • 어떻게 구현할 수 있을 지 페어와 함께 고민하고 custom hook으로 만들어봅시다.
• CreateBlog 컴포넌트(CreateBlog.js)
  • 현재 CreateBlog 컴포넌트 내 form 내 input과 textarea, select는 전부 하드코딩이 되어 있습니다.
  • input과 textarea, select는 전부 custom hook으로 리팩토링해볼 수 있습니다.
  • Chapter 2-4. Custom Hooks에서 실습했던 내용을 복습해보며 리팩토링 해봅시다.

 

𝟮. 구현 코드

📌 App.js : 전체 화면 렌더링

import { BrowserRouter, Routes, Route } from 'react-router-dom';
import Navbar from './component/Navbar';
import Footer from './component/Footer';
import { useEffect, useState } from 'react';
import { Suspense, lazy } from 'react';
import useFetch from './util/useFetch';
import ScrollToTop from './Scroll';

const Home = lazy(() => import('./Home'));
const CreateBlog = lazy(() => import('./blogComponent/CreateBlog'));
const BlogDetails = lazy(() => import('./blogComponent/BlogDetail'));
const NotFound = lazy(() => import('./component/NotFound'));
// lazy를 사용해서 동적 import를 구현한다.

function App() {
  const { blogs, isPending, error } = useFetch('http://localhost:3001/blogs');
  // useFetch 커스텀 훅을 만들어서 서버에서 데이터를 받아온다.

  return (
    <BrowserRouter>
      <ScrollToTop />
      { error && <div>{ error }</div> }
        <div className="app">
          <Navbar />
          <div className="content">
            <Suspense fallback={<div>loading...</div>}>
              <Routes>
                <Route exact path="/" element={<Home blogs={blogs} isPending={isPending} />} />
                <Route path="/create" element={<CreateBlog />} />
                <Route path="/blogs/:id" element={<BlogDetails />} />
                <Route path="/blogs/:id" element={<NotFound />} />
              </Routes>
            </Suspense>
          </div>
          <Footer/>
        </div>
    </BrowserRouter>
  );
}

export default App;

 

📌 BlogDetail.js : 블로그 글 하나하나를 의미

import { useEffect, useState } from "react";
import{ Link, useNavigate, useParams } from "react-router-dom";
import useFetch from "../util/useFetch";

const BlogDetails = () => {
  const [isLike, setIsLike] = useState(false);

  const { id } = useParams();
  // useParams로 url의 id값, 즉 매개변수를 가져와서 클릭한 블로그 글로 들어갈 수 있게 한다.
  const navigate = useNavigate();
  // useNavigate를 사용해서 리다이렉트를 할 수 있게 한다.
    
  const { blogs, isPending, error } = useFetch(`http://localhost:3001/blogs/${id}`)
  const blog = blogs;

  const handleDeleteClick = () => {
    console.log('delete!');
    navigate('/');
    // delete 버튼을 누르면 다시 home으로 리다이렉트 된다.
  }
  

  const handleLikeClick = () => {
    setIsLike(!isLike);
    let likeUpdate = blog.likes;
    isLike === true ? 
   ( likeUpdate > 0 ? likeUpdate = blog.likes - 1 : likeUpdate = blog.likes  ) 
   : likeUpdate = blog.likes + 1
   // 빨간 하트일때는 likes 수를 +1 해주고, 하얀 하트일때는 -1해준다.

    const putData = {  
      'id' : blog.id,
      "title" : blog.title,
      "body" : blog.body,
      "author" : blog.author,
      "likes" : likeUpdate,
    }
    // 기존 데이터에서 likes 수만 바뀐 새 객체를 만들어주고
    
    fetch(`http://localhost:3001/blogs/${id}`,{
         method:"PUT",
         body : JSON.stringify(putData),
         // fetch의 PUT 메서드로 새 객체를 보내준다.
         headers: {
           'Content-Type': 'application/json'
       },
       })
       .then( () => {
         navigate(`/blogs/${blog.id}`);
         window.location.reload();
         // 새로 고침이 자동으로 되게 한다.
       })
       .catch( err => console.log(err) )
 }

  return (
    <div className="blog-details">
        { isPending && <div>Loading...</div> }
        { error && <div>{ error }</div> }
        { blog && (
            <article>
                <h2>{ blog.title }</h2>
                <p>Written by { blog.author }</p>
                <div>{ blog.body }</div>
                <button onClick={handleLikeClick}>
                  {isLike ? '❤️' : '🤍'}
                  // isLike 값에 따라서 조건부로 하트를 렌더링해준다.
                  </button>
                <button onClick={handleDeleteClick}>delete</button>
            </article>
        )}
    </div>
  );
}

export default BlogDetails;

 

📌 CreateBlog.js : 새 글 등록하기

import { useState } from "react";
import { useNavigate } from "react-router-dom";
import useInput from "../util/useInput";
import Input from "../component/Input";
import Textarea from "../component/Textarea";
import useTextarea from "../util/useTextarea";
import Select from "../component/Select";
import useSelect from "../util/useSelect";

const CreateBlog = () => {
    const [title, setTitle] = useInput('');
    const [body, setBody] = useTextarea('');
    const [author, setAuthor] = useSelect('김코딩');
    // Input, Textarea, Select 각자의 커스텀 훅을 사용한다.
 
    const navigate = useNavigate();

    const handleSubmit = (e) => {
        e.preventDefault();
       const putData = { title, body, author, likes: 0 };
       // 새 게시물에 넣을 데이터를 객체로 만들어주고
      fetch('http://localhost:3001/blogs',{
           method:"POST",
           body : JSON.stringify(putData),
           // 그 데이터를 POST로 보내준다.
           headers: {
             'Content-Type': 'application/json'
         },
         })
         .then( () => {
           navigate('/');
           window.location.reload();
           // Home으로 리다이렉트 시키고, 자동으로 새로고침 하게 한다.
         })
         .catch( err => console.log(err) )
    }

    return (
      <div className="create">
        <h2>Add a New Blog</h2>
        <form onSubmit={handleSubmit}>
        // Input, Textarea, Select 컴포넌트를 사용한다.
            <Input 
            label={"제목"}
            required 
            value={title}
            content={setTitle}
            // Input에서 content는 onChange가 실행되면 실행될 함수이다.
            // 여기는 제목을 바꿔줘야하므로 title 상태를 바꿔주는 setTitle을 넘겨준다.
            placeholder="제목을 입력해주세요."
            />
            <Textarea
            required
            label={"내용"}
            value={body}
            content={setBody}
            placeholder="내용을 입력해주세요."
            ></Textarea>
            <Select
            label={"작성자"}
            value={author}
            content={setAuthor}
            >
            </Select>
            <button>등록</button>
        </form>
      </div>
    );
  }
  
  export default CreateBlog;

 

📌 useFetch.js : fetch의 custom hook

import { useState, useEffect } from 'react';

const useFetch = (url) => {
  /* useState를 이용하여 data, isPending, error를 정의하세요. */
  const [blogs, setBlogs] = useState();
  const [isPending, setIsPending] = useState();
  const [error, setError] = useState();
  /* useFetch 안의 중심 로직을 작성해주세요. */
  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);
          setBlogs(data);
          setError(null);
        })
        .catch(err => {
          setIsPending(false);
          setError(err.message);
        })
    }, 1000)
  });

  /* return 문을 작성해주세요. */
  // 모든 값을 return 해주고, 얘를 받는데에서는 필요한 것만 갖다 쓰면 된다.
  return {
    blogs, setBlogs,
    isPending, setIsPending,
    error, setError
  }
}

 
export default useFetch;

 

📌 Input.js : input의 컴포넌트화

function Input({ label, content }) {
  return (
    <div className="name-input">
      <label>{label}</label>
      <input
        onChange={content}
        // content는 onChange가 실행됬을 때 실행 될 함수이다.
        type="text"
      />
    </div>
  );
}

export default Input;

 

📌 useInput.js (useTextarea, useSelect 도 비슷하다) : input의 custom hook

import { useState } from 'react';

function useInput(initialContent) {
  const [content, setContent] = useState(initialContent);
  // 값을 받아와서 
  const onChange = (event) => {
    setContent(event.target.value);
    // input에 입력할 때 마다 바뀐 값으로 바꿔준다.
  }
  
  return [content, onChange];
  // 바뀐 값과, 그 값을 바꿀 수 있는 함수를 같이 반환한다.
}

export default useInput;

 

📌 Scroll.js : 새로고침 후 스크롤이 자동으로 맨 위로 올라가는 기능

import { useEffect } from "react";
import { useLocation } from "react-router-dom";

export default function ScrollToTop() {
  const { pathname } = useLocation();

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

  return null;
}

➰ 이렇게 scroll 컴포넌트를 하나 만들어주고, <BrowserRouter> 바로 밑에 <ScrollToTop /> 이렇게 넣어준다 => 모든 Router에서 적용된다.

 

 

𝟯. 시연 화면