[React] Props Getters 패턴

유데미 강의를 듣고 실습한 내용 정리하기

---

이전 글에서 prop collection을 사용했다. prop collection을 통해서 전달 해야하는 여러개의 prop들을 한번에 관리 할 수 있다.

 const toggleProps = {
    onClick: updateClapState,
    "aria-pressed": clapState.isClicked,
  };

<ClapContainer setRef={setRef} data-refkey="clapRef" {...toggleProps}>

그런데 만약 toggleProps의 다른 prop들은 가져와서 사용하고, onClick함수만 다른 함수를 사용하고 싶다면 어떻게 해야 할까?

toggleProps의 updateClapState 함수 대신 새로운 핸들러인 handleClick를 onClick에 등록하고 싶다면 다음과 같이 오버라이트를 통해 구현할 수 있다.

<ClapContainer
      setRef={setRef}
      data-refkey="clapRef"
      {...toggleProps}
      onClick={handleClick}
    >

이렇게 작성하면 toggleProps의 onClick이 그 후에 할당한 handleClick으로 오버라이트 된다.
그러나 이 방법은 prop collecion 의 prop을 재정의 하는 것이 아닌 단순히 해당 컴포넌트에서 덮어씌워버리는 방식이다.
따라서 유연한 패턴으로 볼 수 었다.

props getters 패턴은 prop getter의 목록을 제공한다. 사용자는 getter를 바로 사용할 수 있고 필요한 경우 getter에 포함된 props를 재정의 할 수 있다.

prop collecions를 반환하는 함수를 만들어 jsx에서 해당 함수를 실행시켜 collecion을 얻는 방법을 props getters패턴이라고 한다.

  const getToggleProps = ({ onClick, ...otherProps } = {}) => ({
    onClick: callFnsInSequence(updateClapState, onClick),
    "aria-pressed": clapState.isClicked,
    ...otherProps,
  });

 const handleClick = () => {
    console.log("CLICKED!!!!");
  };

  <ClapContainer
      setRef={setRef}
      data-refkey="clapRef"
      {...getToggleProps({ onClick: handleClick, "aria-pressed": false })}
    >

재정의 할 props를 getter에 넘겨주면 getter안에서 인자로 받은 값들로 prop들을 재정의 한다.

onClick을 재정의 한다면 전달 받은 함수로 재정의 하고, 그렇지 않다면 기본으로 설정한 값을 리턴한다.

const callFnsInSequence =
  (...fns) =>
  (...args) => {
    fns.forEach((fn) => fn && fn(...args));
  };

callFnsInSequence 는 함수를 리턴하는 함수이다.
전달된 인자 배열(함수가 담긴 배열)을 돌면서 함수가 존재하면 원래의 argument를 할당해 리턴한다.
getter에서 onClick을 재정의 했다면 handleClick함수가 최종 객체에 저장되고, 그렇지 않다면 updateClapState가 할당될 것이다.

props getters 패턴은 사용이 쉽고 유연하게 prop을 재정의 가능하다.

그러나 내부가 보이지 않으므로 유지 보수시에 제공된 prop들을 살펴 보아 변경시 side effect가 없는지 체크해야 해야 하는 단점이 있다.