React Custom Hook return Array vs Object 차이

커스텀 훅을 만들 때 보면 아래와 같은 두 가지 경우가 있음을 볼 수 있다.

const [like,setLiked] = useState(false);
const {like,setLiked} = useState(false);

이 두가지의 차이점은 배열이냐 객체냐이다. (엄밀히 배열도 객체인점은 명심하자)

기능적으로 차이는 없지만 비구조화 할당을 해서 사용할 때 차이가 발생한다.

배열같은 경우 배열의 순서를 정확히 맞추어서 꺼내야하지만,

반대로 Object의 경우에는 자유롭게, property 이름만 가져오면된다.

 

그래서 어떤 방식을 사용해도 상관없지만, 관습적으로 사용되는 방식은 hook이 return 하는 값이 2개일 경우에, 또한 그것이 state 값과 그 state를 변경하는 함수일 때 배열을 사용한다.(useState가 그렇게 되어있으니, 관습적인 사용법을 유도할 수 있다)

 

만약에 return 하는 값이 3개 이상이라면 Object를 사용하는 것이 외우지 않아도되서 좋다고 생각한다.

3개이상일 경우에는 배열일 경우 그 순서를 알고있어야 하지만 Object일 경우 이름을 그대로 꺼내다 쓰면 되기때문에 순서에 영향을 받지 않는다.