[react] Custom hooks 의 return value 차이

Custom Hook에서 여러 개의 값을 반환하는 방법은

배열로 리턴하는 방법과 객체로 리턴하는 방법으로 두 가지가 있다.

 

 

두 타입의 장단점이 극명하기 때문에 상황에 따라 구분에서 사용하면 좋다.

const [arr1, arry2] = useArrayReturn();
const { obj1, obj2 } = useObjectReturn();

 

 

1. 배열 형태로 반환

 

useState나 useEffect 처럼 많은 라이브러리에서 배열을 반환하는 경우가 많다.

import { useState } from 'react';

const useCounter = () => {
  const [count, setCount] = useState(0);
  ...

  return [count, increment, decrement];
}

 

배열을 반환하는 경우 인덱스를 사용해서 값을 추출하기 때문에

항목 순서를 반드시 지켜야 한다.

const CounterComponent = () => {
  const [count, increment, decrement] = useCounter();

  return (
    ...
  );
}

 

장점 

• 간결함 : 배열을 구조 분해 할당으로 쉽게 값을 추출
• 순서 중요 : 반환 값들의 순서가 중요

단점 

• 가독성 부족 : 구조 분해 할당 시 각각의 값이 무엇을 의미하는지 불명확

 

 

 

2. 객체 형태로 반환

 

객체로 값을 반환할 때는 이름이 지정된 속성으로 값에 접근한다.

import { useState } from 'react';

function useCounter() {
  ...

  return { count, increment, decrement };
}

function CounterComponent() {
  const { count, increment, decrement } = useCounter();

  return (
    ...
  );
}

장점

• 가독성 향상 : 변수 이름을 통해 각 값이 무엇을 의미하는지 알 수 있음
• 유연성 : 반환 값들의 순서에 구애받지 않고, 속성을 추가하거나 제거할 때 코드의 다른 부분을 변경할 필요 없음

단점

• 조금 더 장황함 : 속성 이름을 통해 값에 접근해야 해서 배열에 비해 코드가 길어짐
• 구조 분해 시 이름 변경이 어려움 : 구조 분해할 때 속성 이름을 변경하려면 추가적인 문법 필요

 

 

 

---

 

결론

 

• 배열 형태: 반환하는 값들의 순서가 명확하고 중요한 경우 (예: useState) 유용
• 객체 형태: 읽기 쉽고 유연성이 필요할 때, 특히 반환할 값이나 함수가 많을 때