[#325] Add helpers for Swiper

[2wheeh]

#325

Changes

useStateRef

useRef 와 useState 을 결합한 커스텀 훅입니다.

useRef:

• 렌더링 싸이클과 무관하게 항상 최신값을 참조 가능
• 렌더링 싸이클과 무관하므로 값을 업데이트 해도 렌더링 트리거 안함

useState:

• 상태 업데이트가 리렌더링을 트리거 함
• 리렌더링 전까지 변경된 값 참조 불가능

두 훅을 결합해, 값의 변경이 생기면 렌더링을 트리거 하면서 동시에 렌더링 싸이클과 무관하게 최신 값을 참조 하기 위한 용도입니다.

이벤트 리스터로 등록될 콜백함수가 클로져로서 상태를 참조하는 경우에 유용합니다.

이 상태가 단순히 useState 에서 반환된 값이라면 상태 업데이트가 생겼을 때,
이 변경이 렌더링을 통해 상태에 반영되기 전까지 콜백함수는 stale 한 상태 값을 참조합니다.

useStateRef 에서는 callback 함수 내부에서 최신값을 참조하기위해 ref.current 값을 사용할 수 있습니다.

참고로 useEffect 의 dependency Array 에 상태를 추가해서 최신 값을 사용하려는 시도는 다음 문제가 있습니다:

• 상태 업데이트마다 이벤트리스터 해제, 등록을 반복하는 오버헤드가 발생
• 상태 업데이트 중에 발생하는 이벤트는 여전히 올바른 최신 값을 참조하지 못함

정리하자면 스크롤, 터치 이벤트 리스너에서 올바른 좌표값을 핸들링하면서 UI 에도 반영하기위해서 사용하는 패턴입니다.

getTouchEventData

마우스 이벤트와 터치 이벤트, 리엑트 합성 이벤트와 브라우져 이벤트를 동일하게 처리하기 위한 유틸 함수입니다.

getValidChildrenOfType

children 배열에서 특정 타입의 컴포넌트를 얻기위한 유틸 함수입니다.
컴포넌트 합성을 위해 주로 사용됩니다.

i.e.

function Example(children) {
   const header = getValidChildrenOfType(children, ExampleHeader);
   const footers = getValidChildrenOfType(children, ExampleFooter);

  return (
    <div>
     {header}
     {footer}
    </div>
  );
}

function ExampleHeader() {
   // ...
}

Example.Header = ExampleHeader;

function ExampleFooter() {
  // ...
}

Example.Footer = ExampleFooter;

이런 식으로 작성된 합성 컴포넌트는 다음 패턴으로 사용됩니다.

<Example>
    <Example.Header />
    <Example.Footer />
</Example>

[github-actions]

🚀 Storybook preview: https://661a626abbe1237b16fcba38--cheerful-pothos-666fe1.netlify.app

[github-actions]

🚀 Storybook preview: https://661f76f703f27df1b11e05e2--cheerful-pothos-666fe1.netlify.app

[github-actions]

🚀 Storybook preview: https://661f77a2fb5859e6ec4244dd--cheerful-pothos-666fe1.netlify.app

[github-actions]

🚀 Storybook preview: https://6620ad18babda8a31d90f7ad--cheerful-pothos-666fe1.netlify.app

[isutare412]

오 ref, state 훅을 결합해서 이렇게 사용할 수 있군요.
코드 잘 봤습니다 👍