반응 컨텍스트에서 허용되지 않는 함수 호출

반응 컨텍스트 안에서 실행할 수 없는 함수를 반응 컨텍스트 안에서 호출했습니다.

예를 들어 computed나 현재 실행 중인 effect 안에서는 effect를 예약할 수 없습니다. 템플릿 표현식도 자체 반응 컨텍스트에서 실행되므로 표현식의 일부로 effect 같은 함수를 호출하지 마세요.

계산 표현식은 순수해야 합니다. 순수하다는 것은 표현식이 부수 효과를 일으키지 않는다는 뜻입니다. afterNextRender/afterEveryRender 예약, 새로운 effect 생성, 옵저버블 구독 등이 부수 효과에 해당합니다.

흔한 실수를 방지하기 위해 반응 컨텍스트 안에서는 일부 작업을 명시적으로 금지합니다. 예를 들어 computed 안에서 afterNextRender/afterEveryRender를 사용하면 계산 표현식을 평가할 때마다 새로운 렌더링 후킹 함수를 예약합니다. 이는 의도하지 않은 동작일 가능성이 크고 애플리케이션 성능을 떨어뜨릴 수 있습니다.

오류 해결

이 오류 가이드가 모든 경우를 다루지는 않습니다. 자주 발생하는 몇 가지 상황과 해결 방법을 설명합니다.

afterNextRender/afterEveryRender

afterNextRender/afterEveryRender 호출을 반응 컨텍스트 밖으로 옮기세요.

컴포넌트 클래스의 생성자는 렌더링 후킹 함수를 예약하기 좋은 위치입니다. 또는 untracked로 반응 컨텍스트를 벗어나 이 오류를 명시적으로 피할 수 있습니다.

effect

effect 호출을 반응 컨텍스트 밖으로 옮기세요.

@Component 클래스의 생성자는 effect를 예약하기 좋은 위치입니다.

toSignal

toSignal 호출을 반응 컨텍스트 밖으로 옮기세요.

result = computed(() => {
  const dataSignal = toSignal(dataObservable$);
  return doSomething(dataSignal());
});

다음과 같이 리팩토링할 수 있습니다.

dataSignal = toSignal(dataObservable$);
result = computed(() => doSomething(dataSignal()));

이 방법이 불가능하다면 옵저버블을 직접 구독하는 방법을 고려하세요.

최후의 수단으로 untracked를 사용해 반응 컨텍스트를 벗어날 수 있습니다. 이 경우 untracked 안에서 읽는 시그널이 추적되지 않을 수 있으므로 주의하세요.

오류 디버깅

오류 메시지에는 예상하지 못한 위치에서 호출한 함수가 표시됩니다. 애플리케이션 코드에서 해당 함수 호출을 찾으세요.

브라우저의 스택 트레이스에서도 함수가 호출된 위치와 함수의 위치를 확인할 수 있습니다.