[React] Custom hooks의 return value

 

 

 

 

 

 

 

 

 

 

Custom Hook에서 여러개의 값을 return하는 방법은 두가지가 있다.

 

 

const [one, two] = useNumbers();
const { a, b, c } = useAlphabet();

 

array형태와 object형태로의 return이다.

 

어떠한 경우에 array형태를 사용하고 object형식을 사용하는지에 대한 정답은 없다. 하지만 두 타입의 장단점이 극명하기 때문에 상황에 따라 구분에서 사용하면 좋다.

 

 

 

 

array로 return

const [color, setColor] = useState('MintCream');
const [width, setWidth] = useState('100vw');

• 적은 수의 값들을 return하는 경우
• 같은 컴포넌트 내에서 한번 이상 사용하는 경우

 

array로 리턴 값을 넘겨주게 되면 항목 순서를 반드시 지켜야 한다. 그래서 항목을 많이 넘겨줄 경우 그 순서를 지켜야 하기 때문에 사용하기 불편하다.

 

object보다 변수 명을 변경하기가 간편하기 때문에 자유롭게 변수 명을 설정해서 사용할 수 있다. useState가 그 예시이다.

 

 

 

 

 

 

Object로 return

const { value, highlighted, handleChange, handleCancel } = useAutocomplete()

• 많은 수의 값들을 return하는 경우
• 한 컴포넌트 내에 한번만 사용할 경우

 

Object는 순서를 기억할 필요가 없으며, 필요한 항목만을 가져올 수 있다. 그러므로 항목이 많은 경우에 사용하기 편리하다. 다만 항목의 이름을 바꾸기 위해서는 { value : userData } 와 같이 써주기 때문에 array보다 변수 명을 바꾸기 불편하다.

 

 

 

 

 

 

 

 

 

📌

https://dev.to/namick/writing-your-own-react-hooks-the-return-value-3lp6