커스텀 훅을 만들어보자. 한마디로 만능 함수 컴포넌트를 따로 만들어서 필요한데 어디든 한 줄 붙여넣으면 다 된다.
이전 시간에 연습했던 가내수공업같이 그 속에서 자급자족하던 코드들 중 통신용 함수를 따로 떼어다가 커스텀 훅을 만들어 보았다.
맨처음에는 햇갈렸다. 리액트 훅도 개념이 안잡히는데 커스텀 훅은 이게 무슨 @.@ ????
하지만 계속 접하다보니 그 개념이 이해되었다. 아마 코드경험을 3번정도 하고 나면 이해가 갈 것이다. 동영상이든 블로그든 하면 된다.
혹시 코드 해석하다가 디테일하게 궁금한 점이 있다면 ? 어차피 내용은 똑같으니 지난 포스팅을 클릭해보자.
Hoxy .... 커스텀 훅 만들기 전에 새발자가 일일이 가내 수공업으로 실습한 코드를 보고 싶다면? ↓↓↓
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
'React' 카테고리의 다른 글
React(42) 리액트 훅 - POST 방식으로 요청 보내기 (0) | 2021.09.04 |
---|---|
React(41) 리액트 훅 + 타입스크립트 - 모달창 만들기 (2) | 2021.09.02 |
React(39) 리액트 훅 - json-server 사용하여 통신하기 (0) | 2021.08.25 |
React - json-server 실행오류 net::ERR_CONNECTION_REFUSED (0) | 2021.08.21 |
React(38) 리액트 훅 - json-server 로 RESTful API 만들기 (0) | 2021.08.20 |
댓글