본문 바로가기
카테고리 없음

React Hooks -Custom Hooks

NandaNanda 2024. 3. 29. 22:39

실습: https://github.com/dhflekddy/ReactHookPractice/tree/main/customhooks

커스텀훅이 조금 어렵다고 느껴질 수 있는 내용은 원래 제 자리에 있어야 할 내용이 커스텀훅의 사용으로 커스텀 훅 안으로 감춰져 버렸기 때문이다. 즉, 내용은 서로 연관되 있지만 커스텀 훅 파일과 커스텀 훅이 적용되는 파일이 분리되어 있어 조금 어렵게 느껴진다.

1. Custom Hook이란?

커스텀 훅은 개발자가 직접 만든 hook이다. 반복되는 로직을 묶어 하나의 컴포넌트로 만들듯이 반복되는 메서드를 하나로 묶어 사용한다. 보통 Input과 Fetch를 관리할 때 자주 쓰인다.

2. Custom Hook, 왜 사용할까?

앞서 말했듯이 커스텀 훅은 리액트에서 컴포넌트를 만드는 과정을 생각하면 된다.

  • 코드, 로직의 간결해지고 가독성이 좋아진다
  • 필요없는 반복을 줄이고 재사용성을 높인다
  • 수정사항이 있을 시 커스텀 훅에서만 수정하면 되기 때문에 유지보수에 용이하다

Custom Hook의 매력은 커스텀 훅을 만드는데 기존의 리엑트 내장형 훅을 자유롭게 사용하여 만들수 있다는 것이다
당연하겠지만 커스텀 훅을 사용하는 컴포넌트 마다 커스텀 훅이 가지는 state들은 독립적이다. 이러한 특정은 커스텀 훅의 폭발적인 재사용성을 보장합니다.

 

 

3. Custom Hook 작성 시 지켜야 할 것

리액트 내장훅과 마찬가지로 커스텀 훅의 이름은 use로 시작해야된다.

4. 사용 예제 코드

커스텀 훅을 이용하여 API를 호출하는 로직을 작성, fetch함수 부분을 커스텀 훅으로 만들어본다.

1) hooks라는 폴더를 만들어 커스텀 훅을 관리한다
2) 커스텀 훅을 만들 로직을 뽑아내어 작성, hook을 만든다
3) useEffect가 실행되면서 App에서 보낸 url을 useState의 value가 받는다
4) value를 리턴한다: 커스텀훅은 JSX가 아닌 배열 또는 오브젝트를 리턴한다

🍕 custom hook 사용 전

function App() {
  const [user, setUser] = useState([]);
  const url = 'https//하나둘셋넷다섯';
  
  useEffect(() => {
    fetch(url)
     .then(res => res.json())
     .then(res => setUser(res))
  }, [])

🍕 custom hook 만들기

function useFetch(url) {
  const [value, setValue] = useState([]);
  
  useEffect(() => {
    fetch(url)
     .then(res => res.json())
     .then(res => setValue(res))
  }, [url])
  
  return value
}

🍕 custom hook 적용하기

import useFetch from './hooks/useFetch';

function App() {
  const user = useFetch('https://하나둘셋넷다섯');
  
  return (
    //JSX
    );
};

export default App;

티스토리툴바