본문으로 건너뛰기

ImpressionArea

브라우저 뷰포트에 보여지거나 사라지는 시점에 이벤트를 발생시키는 컴포넌트입니다. IntersectionObserver API를 사용하여 효율적으로 동작합니다.

ImpressionArea는 추가적인 div를 render합니다. (div가 없어야 하는 경우 useImpressionRef Hook을 사용하세요.)

<ImpressionArea
// 요소가 브라우저 뷰포트 진입시 호출되는 callback
onImpressionStart={() => {}}
// 요소가 브라우저 뷰포트에서 나왔을 때 호출되는 callback
onImpressionEnd={() => {}}
// 타겟 요소의 가시성을 검사하기 위해 Viewport 대신 사용할 요소를 지정할 수 있습니다.
// @default null
root={root}
// 실제 요소가 차지하는 것 대비 얼마나 margin을 줄 것인지 지정 (`string`)
// [MDN](https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserver/rootMargin) 을 참고하세요.
rootMargin={rootMargin}
// 몇 퍼센트 이상 보여졌을 때 진입한 것인지 지정, 0~1까지의 숫자. (`number`)
// @default 0
areaThreshold={areaThreshold}
// 몇 밀리세컨드 이상 화면에 진입해 있을 때 impression 이벤트를 호출할지 지정, ms 단위. (`number`)
// @default 0
timeThreshold={timeThreshold}
>
내가 보여지면 onImpressionStart를 호출해줘
</ImpressionArea>

Examples

<ImpressionArea onImpressionStart={() => logger.log('Hello')}>
<div>Hello</div>
</ImpressionArea>

Tests

@toss/impression-area/testing을 이용하여 테스트할 수 있습니다.

import { mockImpression } from '@toss/impression-area/testing';

describe('ImpressionArea', () => {
it('사용자에게 보여지면 onImpressionStart가 호출되고, 가려지면 onImpressionEnd가 호출된다.', async () => {
const onImpressionStart = jest.fn();
const onImpressionEnd = jest.fn();

render(
<ImpressionArea onImpressionEnd={onImpressionEnd} onImpressionStart={onImpressionStart}>
안녕하세요
</ImpressionArea>
);

const div = screen.getByText('안녕하세요');

mockImpression.view(div);

await waitFor(() => {
expect(onImpressionStart).toBeCalledTimes(1);
});
});
});