[React] 리액트 & Next.JS

custom hook 이란? React hooks custom hook 이란?

OnceBH 2021. 8. 15. 05:53
반응형

리액트 커스텀 훅 React custom hook

custom hook 이란? React hooks custom hook 이란?

 

오늘은 짧게 리액트 훅에서 커스텀 훅을 알아보겠습니다.

커스텀 훅이란 말 그대로 개발자가 스스로 커스텀 한 훅을 말합니다.

예를 들면 useState, useEffect, useContext 등은 이미 내장되어 있는 훅으로
바로 사용 가능하지만, 커스텀 훅은 개발자의 입맛에 따라 만들어 사용 가능합니다.

그럼 짧게 커스텀 훅은 무엇이고 또 언제 왜 사용하는지 간단히 알아보겠습니다.

(어느 정도 커스텀 훅에 관해 알고 계신다면 바로 코드 예시로 가시는 것도 좋은 방법입니다.)

 

  1. 커스텀 훅이란?
  2. 언제? 왜? 사용하는가.
  3. 코드 예시.
  4. 마치며.

 

1.  커스텀 훅이란?

 

우리는 리액트를 사용할 때 상태에 관해서 많은 신경을 쓰게 됩니다.

리액트의 컴포넌트들은 상태에 따라서 유동적으로 바뀌고 변화하여야 하기 때문이죠.

그 덕분에 우리는 필요한 부분만 부분적으로 업데이트할 수 있는 것입니다.

이에 우리는 useState를 자주 사용하게 됩니다.

자 여기서 우리는 한층 더 깊게 생각할 필요가 있습니다.

전에도 언급하였듯, 개발자는 게을러야 합니다. 즉 중복되는 코드는 하나의 로직으로

묶어 언제나 쉽게 import 하여 사용할 수 있게 준비하는 것이 좋습니다.

이를 위해 우리는 커스텀 훅이라는 것을 사용하게 됩니다.

언제, 왜 사용하는지는 밑에서 알아보겠습니다.

 

 

2.  언제? 왜? 사용하는가.

 

언제? 사용하는가는 솔직히 크게 본다면 개발자 혹은 팀의 필요에 따라 달라지지 않을까 싶습니다.

하지만 주로 자주 사용되는 커스텀 훅은 유저의 Input을 관리할 때 혹은 Fetch를 요청할 때입니다.

 

왜? 앞에 언급했듯이, 코드, 로직의 반복을 최소화하고 재사용성을 높이기 위해서입니다.

또한 변경사항이 있을 시 당연히 커스텀 훅에서만 변경하면 되기에 수정하기도 훨씬 효과적이고 효율적입니다.

 

3. 코드 예시.

 

먼저 아셔야 할 부분은 커스텀 훅을 작성 시 항상 use로 시작하셔야 합니다.

예를 들면 useInput, useFetch와 같이 말이죠.
그 후 어려울 것 없습니다.

우리가 리액트에서 컴포넌트를 만드는 것과 같이 만들어주시면 됩니다.

아래의 코드를 보시면 useFetch라는 이름의 커스텀 훅을 만들고 있습니다.

 

import { useState } from 'react';

const useFetch = (initialUrl: string) => {
  const [url, setUrl] = useState(initialUrl);

  return [url, setUrl];
};

export default useFetch;

자 커스텀 훅이 만들어졌습니다.
일반 컴포넌트를 만들 때와 비슷한 구성을 가지고 있습니다.
커스텀 훅이지만 useState 혹은 useEffect를 함께 사용하기도 합니다.
(당연히 다른 내장 훅들도 사용 가능합니다. 하지만 일반적으로 저 두 개가 가장 빈번히 쓰입니다.)
커스텀 훅이기에 앞서 설명드린 대로 use라는 이름을 가지고 있습니다.
또한 return을 JSX가 아닌 배열로 value와 setValue로 합니다.
자 그럼 axios를 이용하여 좀 더 깊게 알아보겠습니다.

 

 

import { useState, useEffect } from 'react';
import axios from 'axios';

const useFetch = (initialUrl: string) => {
  const [url, setUrl] = useState(initialUrl);
  const [value, setValue] = useState('');

  useEffect(() => {
    fetchData();
  }, [url]);

  const fetchData = () => axios.get(url).then(({ data }) => setValue(data));

  return [value];
};

export default useFetch;

자 이번에는 axios와 useEffect를 통해서 좀 더 자세히 들여다보겠습니다.

(제가 작성한 코드는 절대 정답이 아닙니다.)
먼저 과정을 보겠습니다.

 

1. initalUrl 은 useState의 url이 넘겨받습니다.

2. useEffect가 실행됩니다.
3. useEffect안에 존재하는 fetchData가 실행되고, 비동기식으로 value는 data를 받습니다.(단 data가 존재할때. 이를위해서 error를 catch 해주시는게 훨씬 좋습니다. 하지만 저는 간단한 예시를 위해 뺐습니다.)

이게 전체적인 과정입니다.
전혀 어려울 것이 없습니다. 

 

그럼 코드를 작성하는 방법은 알았고, 사용하는 방법도 알아보겠습니다.

 

import useFetch from '../customs/useFetch.tsx';

const App = () => {
    const [value] = useFetch('/api/something');
    
    return <div>{value}</div>;
}

export default App;

자 이렇게 사용 가능합니다. 

그럼 value를 받아오는 대로 JSX에 value가 표시될 것입니다.
그 이유는 리액트에서 컴포넌트는 상태 혹은 props가 변하면 다시 렌더링 하기 때문입니다.

 

 

4. 마치며.

자 다시 한번 몇 가지 키워드를 짚고 가겠습니다.

 

1. 커스텀 훅은 사용 시 use를 앞에 붙어야 한다.

2. 커스텀 훅 또한 useState와 같은 내장 훅을 사용한다.
3. 커스텀 훅은 코드의 중복을 줄이고 재사용성을 높이며, 효율적인 관리를 위해 필요하다.
4. 커스텀 훅은 기본 컴포넌트를 만들 때와 유사하고, JSX가 아닌 배열 혹은 오브젝트를 return 한다.
(즉 return [value]; 혹은 return {value}; 를 한다. 배열의 수와 오브젝트의 수는 개발자의 필요에 따라 추가 가능하다.)
5. 커스텀 훅을 사용하는 방법은 useState와 거의 유사하다.
(초기값을 파라미터로 넘겨주는 게 일반적이고 커스텀 훅이 배열을 return 했느냐 혹은
오브젝트를 return 했느냐에 따라 사용할 컴포넌트에 선언해주면 된다.)
E.x 

value만 배열로 return  : const [value] = useFetch('/api/somehting');
value만 Object로 return : const {value} = useFetch('/api/something');
6. 리액트의 컴포넌트는 하나 이상의 상태의 값이 변경되거나 Props의 값이 변경되면 리 렌더링 된다.

자 오늘은 커스텀 훅에 관해 알아보았습니다.

어떤가요? 처음에는 조금 헷갈릴 수 있지만, 조금만 사용하게 되면 너무너무 편하게 사용할 수 있습니다.

당연히 커스텀 훅 없어도 개발하는데 전혀 문제 되지 않습니다.

하지만 알고 사용하지 않는 것과 모르고 사용하지 않는 것은 천지차이이며,

실제 근무환경에서 또한 커스텀 훅은 빈번히 사용됩니다.

왜냐하면 코드의 중복을 피하고 재사용성을 높이며 관리도 용이해지는데, 안쓸 이유가 없기 때문입니다.

좋은 코드, 가독성이 높은 코드를 위해서 꼭 커스텀 훅을 사용해보시길 바랍니다.

아마 코드의 퀄리티가 훨씬 높아지는 것을 직접 보실 수 있으실 겁니다.

 

항상 처음이 가장 힘들고 어려운 법입니다.
시작 이후에 오는 고비들은 시작 때 오는 고비에 비하면 별거 아닐 것입니다.

오늘도 항상 파이팅하시고 이루고자 하는 목표를 위해 한 발짝 앞으로 다가가시길 바랍니다.

 

완벽한 준비란 없다, 완벽한 준비란 영원히 시작하지 않는 것과 같다.

Es gibt keine perfekte Vorbereitung.

Perfekte Vorbereitung ist das Gleiche, wie nie anzufangen.

반응형