feat(react): useNetwork 신규 훅 추가 #194
Conversation
🦋 Changeset detectedLatest commit: 5dd3739 The changes in this PR will be included in the next version bump. This PR includes changesets to release 1 package
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
| const preservedSubscribe = usePreservedCallback((onStoreChange: () => void) => | ||
| subscribe(onStoreChange, onlineCallback, offlineCallback) | ||
| ); |
There was a problem hiding this comment.
useSyncExternalStore의 첫 번째 인자인 subscribe 함수는 onStoreChange를 필수로 받아오고 이를 호출해야 정상적으로 변화를 감지하고 리렌더링됩니다.
여기다 onlineCallback, offlineCallback 함수들을 추가로 다룰 수 있게 커링으로 구성합니다.
// useSyncExternalStore interface
export function useSyncExternalStore<Snapshot>(
subscribe: (onStoreChange: () => void) => () => void,
getSnapshot: () => Snapshot,
getServerSnapshot?: () => Snapshot,
): Snapshot;
| const getServerSnapshot = () => { | ||
| return true; | ||
| }; |
There was a problem hiding this comment.
getServerSnapshot은 서버사이드 렌더링 시 getSnapshot의 초기값입니다.
초기값으로 true로 설정하였습니다.
| it('should return true for isOnline during server-side rendering', () => { | ||
| const TestComponent = () => { | ||
| const { isOnline } = useNetwork({ | ||
| onlineCallback: onlineCallbackMock, | ||
| offlineCallback: offlineCallbackMock, | ||
| }); | ||
| return <p>{isOnline ? 'online' : 'offline'}</p>; | ||
| }; | ||
|
|
||
| const html = renderToString(<TestComponent />); // server side rendering | ||
|
|
||
| expect(html).toContain('online'); | ||
| }); |
There was a problem hiding this comment.
서버사이드렌더링 시 테스트를 위해 react-dom/server의 renderToString을 사용하였습니다.
|
|
ssi02014
force-pushed
the
feat/useNetwork
branch
2 times, most recently
from
126e642 to
d49f69a
Compare
Codecov ReportAll modified and coverable lines are covered by tests ✅
Additional details and impacted files@@ Coverage Diff @@
## main #194 +/- ##
==========================================
+ Coverage 95.43% 95.44% +0.01%
==========================================
Files 81 81
Lines 810 812 +2
Branches 191 194 +3
==========================================
+ Hits 773 775 +2
Misses 31 31
Partials 6 6
|
|
@Sangminnn 감사합니다!! 해당 훅은 사용자가 갑자기 네트워크 상태가 오프라인이 됐을 때 운영하는 서비스에 아무런 행동을 취하지 않는 것보다 이런 상황을 대응할 수 있는 행동을 할 수 있다는게 굉장히 매력적인 훅이라고 생각이드네요!! 👍👍 |
Overview
Issue: #181
신규
useNetwork훅을 추가합니다.해당 훅은 React에서 제공하는
useSyncExternalStore훅을 통해 브라우저 네트워크 상태를 구독 후online 여부(isOnline)에 대한 값을 반환하는 커스텀 훅입니다.onlineCallback,offlineCallbackprops를 통해 네트워크가 변경됐을 때 특정 함수를 호출 할 수 있습니다.해당 기능은 사용자가 서비스를 이용하다 갑자기 네트워크가 중단됐을 때 특정 행위를 할 수 있기 때문에 굉장히 강력한 기능입니다.
예를 들어, 아래와 같이 fallback 페이지로 이동시킬 수 있습니다.
https://ko.react.dev/reference/react/useSyncExternalStore#subscribing-to-a-browser-api
위 문서의 나오는 예제를 기반으로 작성됐지만
onlineCallback,offlineCallback등의 기능들이 추가됐습니다.참고
^18로 변경합니다.PR Checklist
Contributing Guide