[💻 코드스테이츠 FE 44기] React 심화 - [과제]React Hooks 적용하기

✔️ 시작

그동안 배웠던 Hook을 이용해 과제를 푸는 형식의 과제를 진행했다.

✏️ 알게된 점

json-server 라이브러리

• json 파일을 이용해 REST API 서버를 구축해 주는 라이브러리이다.

//설치 방법
npm i -g json-server

• 전역에 설치해 준다.
• React 앱 파일 내에 설치하면 제대로 작동하지 않을 수 있다.

//서버 실행
cd data
json-server --watch data.json --port 3001

• data 폴더로 이동 뒤
• --port 3001라는 옵션을 붙여줘 3001번 포트에 서버를 열어준다. (옵션을 주지 않으면 자동으로 3000번 포트로 열어주기 때문)

관리자 모드로 실행하기

sudo npm install

그냥 npm install을 하니 권한이 없어 오류가 났다.
sudo를 앞에 붙여 주면 관리 권한을 준다는 뜻이다.

흔히 컴퓨터 프로그램이 잘 안 될 때 관리자 모드로 실행 하기와 비슷한 맥락 같다.

useParams()

• React 16.8 버전 이상에서만 가능하다.
• React 컴포넌트 내에서 URL의 동적 파라미터 값을 가져 올 수 있다.

http://localhost:3000/blogs/1에서
1은 동적 파라미터이다.

사용 전 npm install react-router-dom 설치를 먼저해 주어야 한다.
설치 후

import { useParams } from "react-router-dom";
.
.
.
const id = useParams();
console.log(id) // { id : 1}

useParams()는 객체인 String 타입을 반환한다.
그래서 구조 분해 할당으로 전달할 수 있고 이를 fetch를 이용해 사용할 수 있다.

// 구조분해 할당
const { id: blogId } = useParams()
// useFetch는 Custom Hook이다.
// 뒤에 파라미터를 템플릿 리터럴을 이용해 변경해 줄 수 있다.
const [blog, isPending, error] = useFetch(`http://localhost:3001/blogs/${blogId}`)

useNavigate()

• React Router v6에서 도입되었다.
• 페이지 전환관 URL 변경을 처리하는 함수를 반환한다.
• React 컴포넌트에서 프로그래밍 방식으로 페이지를 이동할 수 있다.

useParams()와 마찬가지로 npm install react-router-dom 설치를 먼저해 주어야 한다.

import { useNavigate } from "react-router-dom";
.
.
.
const navigate = useNavigate();

// 해당 버튼 클릭 시 home으로 이동한다.
const handleDeleteClick = () => {
  // 인자로 이동할 경로를 작성해 준다.
    navigate('/')
  }

navigate(1), navigate(-1)를 이용해 다음 경로, 이전 경로로 이동할 수 있다.(상대 겅로)

• navigate(1) : 현재 경로에서 다음 경로
• navigate(-1) : 현재 경로에서 이전 경로

과제

//BlogDetail.js
const { id: blogId } = useParams()
  const [blog, isPending, error] = useFetch(`http://localhost:3001/blogs/${blogId}`)
  const [isLike, setIsLike] = useState(false);
  const navigate = useNavigate()

  const handleDeleteClick = () => {
    fetch(`http://localhost:3001/blogs/${blogId}`, {
      method: 'DELETE'
    })
    .then(() => {
      navigate('/')
      window.location.reload();
    })
    .catch((err) => console.log(err))
    console.log('delete!');
  }

  const handleLikeClick = () => {
    let payload = {
      ...blog,
      likes: !isLike ? blog.likes + 1 : blog.likes - 1
    }
    fetch(`http://localhost:3001/blogs/${blogId}`, {
      method: 'PATCH',
      headers: {'Content-Type':'application/json'},
      body: JSON.stringify(payload)
    })
    .then(() => {
      setIsLike((prev) => !prev)
    })
    .catch(err => console.log(err))
  }
  .
  .
  .
   <button onClick={handleLikeClick}>
    {isLike ? "❤️" : "🤍"}
   </button>

//CreateBlog.js
const [title, setTitle] = useState('');
  const [body, setBody] = useState('');
  const [author, setAuthor] = useState('김코딩');
  const navigate = useNavigate()

  const handleSubmit = (e) => {
    e.preventDefault();
    const payload = {
      title,
      body,
      author,
      likes: 0,
    };

    fetch(`http://localhost:3001/blogs`, {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify(payload),
    })
    .then(() => {
      navigate('/')
      window.location.reload();
    })
    .catch((err) => console.log(err))
    
    console.log(e.type);
  }

• then을 사용해서 비동기 처리를 했다.
• window.location.reload()를 해서 자동으로 새로고침이 되도록 했다.

📍 마치며

과제를 전부 완료하지 못해 작성하지는 못했지만
이번 과제를 통해 몰랐던 부분도 알게 되었고
서버에 요청 보내는 부분은 안일하게 생각했던거 같다.

이번 기회에 그 부분을 보충하게 된 계기가 된 거 같다.