effect()

반응형
effect(run: () => void | (() => void)): Dispose

상태 변화에 맞춰 바깥세상에 영향을 주는 코드를 실행합니다.

설명

전달한 함수를 즉시 한 번 실행하고, 그 안에서 읽은 상태가 바뀔 때마다 다시 실행합니다. 서버 호출, 저장소 쓰기, 타이머, 외부 구독처럼 화면 바깥으로 나가는 작업에 씁니다.

매개변수

  • run — 실행할 함수. 정리 함수를 돌려주면 다음 실행 직전과 폐기 시점에 호출됩니다.

반환값

이펙트를 멈추는 폐기 함수입니다. 컴포넌트 안에서 만든 이펙트는 해당 컴포넌트가 화면에서 사라질 때 자동으로 폐기되므로, 대개 직접 호출할 일은 없습니다.

예제

const stop = effect(() => {
  document.title = `읽지 않음 ${unread()}건`;
});

주의

이펙트 안에서 자신이 읽은 상태를 다시 쓰면 순환이 생깁니다. 개발 빌드는 같은 이펙트가 한 틱 안에서 반복 실행되면 경고를 남깁니다.