React / custom Hook

Custom Hook

사용자가 직접 정의해서 사용하는 Hook으로 use로 시작하는 이름을 지어주면 된다.

중복 되는 부분을 훅으로 만들어서 재사용성, 유지 보수성 및 코드 가독성을 높일 수 있다는 장점이 있다.

 

---

 

예시 - Counter

 

+, - 버튼으로 숫자를 증가 감소 시키는 다음과 같은 코드가 있다고 할 때,

 

커스텀 훅을 사용하지 않은 경우 (컴포넌트 생성)

• UI와 상태가 결합돼 재사용이 어려움 (App 컴포넌트의 return문에서 여러번 불러오면 여러 개 쓸수는 있다...)
• 만약 똑같은 로직을 다른 컴포넌트에서 쓰려면 복붙해서 사용해야함
• 컴포넌트는 본질적으로는 UI를 구성하는 재사용 가능한 조각이기 때문에 처리 로직, 상태 등이 복잡해지면 컴포넌트가 복잡해짐

function App() {
  return (
    <>
      <Counter />
    </>
  );
}

const Counter = () => {
  const [counter, setCounter] = useState(0);

  return (
    <>
      <div>counter : {counter}</div>
      <button onClick={() => setCounter((prev) => prev + 1)}>+</button>
      <button onClick={() => setCounter((prev) => prev - 1)}>-</button>
    </>
  );
};

 

 

커스텀 훅을 사용한 경우

위 코드와 같은 기능에서 증감폭을 설정하는 것까지 추가했다. 

• useCounter()를 호출만 하면 어디서든 상태를 똑같이 쓸 수 있어서 재사용성이 매우 좋아짐
• 논리를 분리해서 관리가 가능함 
• 커스텀 훅은 반복적으로 사용되는 로직을 재사용하기 위해 생성
• 인자로 설정이 가능해(아래 코드에서는 초기값, step) 유연성이 좋아짐 

function App() {
  // 초기값은 0, step은 3씩 증/감 
  // 구조분해할당으로 세 객체를 받아옴!
  const { count, increment, decrement } = useCounter(0, 3);

  return (
    <>
      <div>
        <div>custom Hook counter : {count}</div>
        <button onClick={increment}>+</button>
        <button onClick={decrement}>-</button>
      </div>
    </>
  );
}

// 커스텀 훅 함수 정의
// initialValue : 기본값은 0, 카운터 시작 숫자
// step : 변화 폭
const useCounter = (initialValue = 0, step) => {
  // count 상태 생성
  const [count, setcount] = useState(initialValue);
  // 각각 증가, 감소 함수
  const increment = () => setcount((prev) => prev + step);
  const decrement = () => setcount((prev) => prev - step);
  // 외부에서 사용할 수 있도록 count, increment, decrement를 객체 형태로 반환
  return { count, increment, decrement };
};

 

 

 

예시 - 외부 데이터 받아오기

json-server를 이용해 외부 데이터를 받아오는 연습이다.

이번엔 db.json, db1.json, db2.json 파일 세개를 만들어서 각각 다른 데이터를 넣어줬고 때문에 포트 번호도 3000, 3001, 3002로 다르게 실행했다.

 

function App() {
  // error는 쓰지 않으므로 loading:loading1, data:data1 이런식으로 구조 분해 할당하면서 변수 이름 바꾸기도 해줘야함
  const { loading: loading1, data: data1 } = useFetch(
    'http://localhost:3000/data',
  );
  const { loading: loading2, data: data2 } = useFetch(
    'http://localhost:3001/data',
  );
  const { loading: loading3, data: data3 } = useFetch(
    'http://localhost:3002/data',
  );

  return (
    <>
      {!loading1 && ( // 로딩 중이 아니라면 (loading1이 false라면)
        <ul>
          {data1.map((el) => (
            <li key={'data1' + el.id}>{el.content}</li>
          ))}
        </ul>
      )}
      {!loading2 && ( // 로딩 중이 아니라면 (loading2가 false라면)
        <ul>
          {data2.map((el) => (
            <li key={'data1' + el.id}>{el.content}</li>
          ))}
        </ul>
      )}
      {!loading3 && ( // 로딩 중이 아니라면 (loading3이 false라면)
        <ul>
          {data3.map((el) => (
            <li key={'data1' + el.id}>{el.content}</li>
          ))}
        </ul>
      )}
    </>
  );
}

const useFetch = (url) => {
  // 로딩 상태 관리
  const [loading, setLoading] = useState(true);
  // 데이터의 상태 관리
  const [data, setData] = useState(null);
  // 에러 상태 관리
  const [error, setError] = useState(null);

  useEffect(() => {
    fetch(url)
      // json->javascript 객체 타입으로 변경해서 받아옴
      .then((res) => res.json())
      // 받아온 데이터를 setData로 data 업데이트
      .then((res) => {
        setData(res);
        setLoading(false);
      })
      // 에러 발생 시
      .catch((err) => {
        setError(err);
        setLoading(false);
      });
    // 받아오는 url에 따라 실행되기 때문에 의존성 배열에 url 추가
  }, [url]);

  // 로딩 상태, 데이터, 에러 여부를 반환
  return { loading, data, error };
};