유튜버 '별코딩' 님의 리액트 영상을 보고 작성한 코드들!
React 에서 기본적으로 제공하는 hooks 와 추가하는 hooks 들이 존재한다!!
출처 : https://codersociety.com/blog/articles/react-hooks
일일이 코드를 작성하는 것보다 훅을 사용하면
편리한 기능들이 확실하다!
그럼 프로젝트 작업을 할 때, 중복되는 코드들이 존재할 수 있는데...
따로 코드를 다른 파일로 분리시켜서 커스텀 hook 을 만들면 어떨가?
input 태그 관련 커스텀 훅
import useInput from "./useInput";
function displayMessage(message) {
alert(message);
}
export default function App() {
const [inputValue, handleChange, handleSumbit] = useInput("", displayMessage);
return (
<div>
<h1>useInput</h1>
<input value={inputValue} onChange={handleChange} />
<button onClick={handleSumbit}>확인</button>
</div>
);
}
그리고, useInput.js 라는 파일을 만들어주고 밑에 있는 코드들을 복사해준다.
import { useState } from "react";
export default function useInput(initialValue, submitAction) {
const [inputValue, setInputValue] = useState(initialValue);
const handleChange = (e) => {
setInputValue(e.target.value);
};
const handleSumbit = () => {
setInputValue("");
submitAction(inputValue);
};
return [inputValue, handleChange, handleSumbit];
}
사실상 App.js 에서 작성한 함수와 useState 를 다른 파일로 옮겨서, 나중에 쓸 수 있게 만든 것!
그리고 return 할 때, 배열로 필요한 요소들을 보내준다.
App.js 에서 나의 커스텀 훅을 불러오고 사용하면 끝!
팝업창이 뜨면서 내가 작성한 문구가 뜨게 된다.
팝업창의 확인 버튼을 누르고, input 안에 있던 텍스트가 사라졌다!
fetch 함수를 이용한 커스텀 훅
import useFetch from "./useFetch";
const BASEURL = "https://jsonplaceholder.typicode.com";
export default function App() {
const { data: userData } = useFetch(BASEURL, "users");
const { data: postData } = useFetch(BASEURL, "posts");
const { data: todoData } = useFetch(BASEURL, "todos");
return (
<div>
<h1>User</h1>
{userData && <pre>{JSON.stringify(userData[0], null, 2)}</pre>}
<h1>Post</h1>
{postData && <pre>{JSON.stringify(postData[0], null, 2)}</pre>}
<h1>Todos</h1>
{todoData && <pre>{JSON.stringify(todoData[0], null, 2)}</pre>}
</div>
);
}
import { useEffect, useState } from "react";
export default function useFetch(BASEURL, initialType) {
const [data, setData] = useState(null);
const fetchUrl = (type) => {
fetch(BASEURL + "/" + type)
.then((res) => res.json())
.then((data) => setData(data));
};
useEffect(() => {
fetchUrl(initialType);
}, []);
return { data, fetchUrl };
}
useFetch 훅은 json 파일 형식을 데이터를 fetch 함수로 불러와, 간편하게 화면에 렌더링 할 수 있다.
useInput 과 달리 return 을 배열 형태가 아닌, 객체로 해서 App.js 에서도 구조분해를 객체를 사용해야 한다.
그리고 각 data 를 url path 에 맞춰 이름을 지어주고, 해당 첫 번째 데이터를 불러오는 것이다.