🚀 Start
리액트를 사용하면 상태관리 신경써야 한다. 왜냐하면 리액트 컴포넌트들은 상태에 따라서 유동적으로 변화하기 때문이다. 따라서, 우리가 필요한 부분만 부분적으로 업데이트가 가능한 것이다.
그렇기 때문에 중복되는 코드는 로직을 구현해놓고 쉽게 import만 해오면 사용할 수 있게 해놓으면 좋다.
useState,useEffect같은 React에서 제공하는 Hook이외에 스스로 개발자가 만들어서 사용할 수 있다.
⭐️ 이것을 custom Hook이라고 한다.
🪝 Custom Hook
- 코드, 로직의 간결해지고 가독성이 좋아진다
- 필요없는 반복을 줄이고 재사용성을 높인다
- 수정사항이 있을 시 커스텀 훅에서만 수정하면 되기 때문에 유지보수에 용이하다
- React의 Hook들처럼 use를 사용하여 hook이름을 작명해야한다.
컴포넌트에서 사용되는 훅 관련된 로직을 함수로 추상화,분리하여 재사용할 수 있게 하는 것
😃 사용 방법
1. hooks라는 폴더를 만들어서 custom hook을 관리
2. custom hook을 만들 로직을 작성
-> 기본 컴포넌트를 만들 때와 유사하고, JSX가 아닌 배열 혹은 객체를 return한다. 배열과 객체의 수는 개발자의 필요에 따라 추가가 가능하다.3. useState과 유사한 구현
초기값을 파라미터로 넘겨주는 것이 일반적이다. custom hook이 배열을 return하는지 객체를 return 하는지에 따라서 사용하 컴포넌트에 선언해주면 된다.
✏️ custom hook 적용 전
useEffect에 의하여 컴포넌트 렌더링 시 fetch를 통해 해당 server url로 부터 데이터를 받아오는 로직이 작성되어 있다.
만약 이렇게 데이터를 받아오는 로직이 여러개라면 useEffect의 코드를 재사용하면 좋기 때문에 custom Hook을 만들면 간편할 것이다.
<App.js>
function App() {
const [user, setUser] = useState([]);
const url = 'https//하나둘셋넷다섯';
useEffect(() => {
fetch(url)
.then(res => res.json())
.then(res => setUser(res))
}, [])✏️ custom hook 작성
- useFetch라는 custom Hook 생성한다.
- App.js에서 url을 useState가 받는다. 그리고 data를 return한다. 즉, url을 인자로 받고 해당 url을 useEffect의 deps로 넣어주면 custom hook이 원할때마다 잘 호출될 것이다.
- useEffect가 실행되면, setData로 data에는 비동기식으로 resJSon(데이터)를 받는다.
(단, data가 존재하지 않는다면 error를 위해 catch를 작성하는 것이 좋다.)
<useFetch.js>
import { useEffect, useState } from "react"
function useFetch(url) {
const [url, setUrl] = useState(url);
const [data, setData] = useState([]);
useEffect(() => {
fetch(url)
.then(res => res.json())
.then(resJson => setData(resJson))
}, [url])
return data
}
export default useFetch✏️ custom hook 적용 후
- useFetch를 hook으로 사용하면서 코드가 간결해졌다.
import useFetch from './hooks/useFetch';
function App() {
const user = useFetch('https://하나둘셋넷다섯');
return (
//JSX
);
};
export default App;🙂 나의 경우에도 자주 사용되는 onClick, onChange 등의 로직이 많고, django로부터 데이터를 받아오는 로직이 중복되는 경우가 있었는데 custom Hook을 통해 재사용을 해보아야겠다.
또 다른 좋은 예시: https://nukw0n-dev.tistory.com/29
출처 및 참고하기 좋은 사이트
