반응 - 선택적 매개변수로서의 후크

후크를 매개변수로 넣을 수 있지만 그렇게 해야 할까요? 왜 그렇게 하시겠습니까?


여기 나와 함께 놀고 있는 Sandbox가 있습니다.

https://codesandbox.io/s/hooks-as-params-1wt4bm



하지만 기본적으로는 다음과 같습니다.

function WeirdComponent({
    hook = useHook(),
    hook2 = useAnotherHook(hook),
}) {
    return (
        <div>
            <div>{hook}</div>
            <div>{hook2}</div>
        </div>
    )
}

function useHook(){
    return "hook!"
}

function useAnotherHook(value){
    return value || "default value"
}

그리고 이것은 구성 요소 내부에 후크를 추가하는 것과 동일하게 작동합니다.

하지만 왜 그럴까요?

가능하다는 것을 깨달았을 때 일부 구성 요소의 단위 테스트를 단순화하는 방법으로 사용했습니다.

이렇게 하면 후크를 모의할 필요 없이 원하는 값을 전달할 수 있습니다.

당신이 할 수 있는 또 다른 놀라운 일은 당신이 원하는 것에 따라 다른 후크를 주입하고 후크만 변경하는 구성 요소 구획을 변경하는 것입니다.

당신은해야합니까?

아마 아닐 겁니다.

아마도 이것의 일부 틈새 용도가 있을 수 있지만, 이 방법으로 할 수 있는 것은 무엇이든 다른 방법으로 할 수 있습니다.

(이 작업을 수행하는 사용 사례에 대한 아이디어가 있다면 그것에 대해 알고 싶습니다.)


표지 사진 작성자: Grant Durr on Unsplash