React(40) 리액트 훅 - Custom Hook 만들기

 

 

커스텀 훅을 만들어보자. 한마디로 만능 함수 컴포넌트를 따로 만들어서 필요한데 어디든 한 줄 붙여넣으면 다 된다.

이전 시간에 연습했던 가내수공업같이 그 속에서 자급자족하던 코드들 중 통신용 함수를 따로 떼어다가 커스텀 훅을 만들어 보았다.

 

맨처음에는 햇갈렸다. 리액트 훅도 개념이 안잡히는데 커스텀 훅은 이게 무슨 @.@ ????

하지만 계속 접하다보니 그 개념이 이해되었다. 아마 코드경험을 3번정도 하고 나면 이해가 갈 것이다. 동영상이든 블로그든 하면 된다.

 

혹시 코드 해석하다가 디테일하게 궁금한 점이 있다면 ? 어차피 내용은 똑같으니 지난 포스팅을 클릭해보자. 

 

Hoxy .... 커스텀 훅 만들기 전에 새발자가 일일이 가내 수공업으로 실습한 코드를 보고 싶다면? ↓↓↓

React(39) 리액트 훅 - json-server 사용하여 통신하기

 

---

React(40) 리액트 훅 - Custom Hook 만들기 

UseFetch.js

이게 따로 떼어 낸 통신용 함수이다. (왜 Hook 이라고 하는지는 정확히는 모르겠다.)

통신용 함수는 주로 다음 화면으로 이동할 때 새로운 데이터를 받아오거나 [보내기] 를 눌러 보내거나 할 때이다. 

이번 건은 버튼을 눌러 서버에서 필요한 데이터만 받아오는 용도이기 때문에 

import { useState, useEffect } from 'react';

export default function useFetch(url) { // 매개변수로는 api 주소를 받는다.
  const [data, setData] = useState([]); // api에서 받아올 객체 이름을 data 라고 지정해놓았다.

  useEffect(() => {			// useEffect로 화면 렌더링시 돌릴 로직을 안에 넣어두자. 
    fetch(url) 				// fetch 함수로 url 을 받아서
      .then(res => {			// 통신성공해서 받은 데이터그룹 res를
        return res.json();		// json 형식으로 보기 편하게 변환하자.
      })
      .then(data => {			// 변환도 성공하면, json으로 받아온 데이터를 data 라고하고
        setData(data);			// setData()를 통해 맨위에 data 값속에 요 데이터를 넣어주자.
      });
  }, [url]);				// 단, url이 변경될 때만 useEffect 실행된다.
  
  return data;				// setData()를 통해 받은 data를 리턴한다.
}

 

Days.js

api 를 물려받지 않고 통신함수 useFetch() 를 통해 데이터를 가져왔다. 

import { useParams } from "react-router-dom"
import Word from "./Word"
import useFetch from "../hooks/useFetch" // 커스텀 훅을 임포트해오자

export default function Day() {
  const { day } = useParams()		 // http://local____/day → 요기서 ay 값을 가져온다.

  const words = useFetch(		 // 커스텀 훅을 통해 받아온 객체 데이터를 words 라고 정의한다.
    `http://localhost:3001/words?day=${day}`
  ); 				

  return (
    <div>
      <h2>Day {day}</h2>
      <table>
        <tbody>
          {words.map((word) => (	      // words를 매핑으로 돌려 그안의 내용을 꺼낼 것이다.
            <Word word={word} key={word.id}/> // <Word> 컴포넌트 속에 props로 꺼낸 객체를 물려준다.
          ))}
        </tbody>
      </table>
    </div>
  );
}

 

DayList.js

보통 통신에서 객체로 가져올 때는 map 으로 매핑해줘서 바리바리 싸진 보따리를 하나하나씩 꺼내준다.

그리고 map() 함수 안에서 최상단 태그는 key 속성을 줘야한다.

import { Link } from "react-router-dom";
import useFetch from "../hooks/useFetch";		// 여기도 커스텀 훅을 임포트해주자

export default function DayList() {
  const days = useFetch("http://localhost:3001/days");	// useFetch에서 받아온 데이터를 days에 넣는다.
  
  return (
    <ul className="list_day">
      {days.map((day) => (			// 받아온 api 객체 days 를 맵에 넣고 돌린다.
        <li key={day.id}>			// 매핑 안의 최상단 태그는 key가 들어 있어야 한다.
          <Link to={`/day/${day.day}`}> 	// Link 태그로 해당 Day의 페이지로 이동한다.
          	Day {day.day}
          </Link>
        </li>
      ))}
    </ul>
  );
}

 

실행화면

Day 버튼 중 아무거나 클릭하면 

 

 

해당 Day 의 영단어가 뿅하고 잘나온다. ( useFetch 로 코드 분리 성공 ! )

 

 

ref: https://www.youtube.com/c/%EC%BD%94%EB%94%A9%EC%95%99%EB%A7%88/playlists