"use no memo" 지시어

01무엇

"use no memo"는 함수를 컴파일러 최적화에서 빼는 지시어다. 붙은 함수는 컴파일러가 없는 것처럼 원본 그대로 남는다.

function MyComponent() {
  'use no memo'
  // 함수 본문
}

02무슨 일이 일어나나

이 지시어는 모든 설정보다 우선한다. compilationMode가 'all'이든 'infer'이든 상관없이, 붙은 함수는 항상 건너뛴다. 컴파일러는 그 함수를 손대지 않고 작성한 그대로 둔다.

파일 맨 위에 두면 그 모듈의 모든 함수에 적용된다. 함수 단위 지시어가 모듈 단위 지시어보다 우선한다.

'use no memo'
// 이 파일의 모든 함수는 컴파일러가 건너뛴다

03사용법

문자열 리터럴로 함수 본문 맨 앞에 정확히 "use no memo"라고 쓴다(별칭 "use no forget"도 인정). 백틱은 안 된다. 영구 해법이 아니라 임시 디버깅 도구이므로, 왜 뺐는지 항상 남긴다.

function ProblematicComponent({ data }: { data: unknown }) {
  'use no memo' // TODO: 이슈 #123 고치면 제거
  // 정적으로 못 잡힌 React 규칙 위반이 있는 코드
  // ...
}

04실무 예시

컴파일러가 어떤 컴포넌트에서 이상하게 동작하는 것 같을 때, 그 함수만 잠시 빼서 원인이 컴파일러인지 가려낼 수 있다. 부작용 있는 서드파티 훅을 감싼 래퍼처럼, 컴파일러가 잘못 최적화할 여지가 있는 곳에도 임시로 쓴다.

function ThirdPartyWrapper() {
  'use no memo' // TODO: 라이브러리 부작용 확인 후 제거
  useThirdPartyHook()
  // ...
}

05왜 중요한가

문제를 좁히는 탈출구라 흔히 쓰진 않지만, 컴파일러 관련 이상을 만났을 때 원인 격리에 요긴하다. 다만 남겨 두면 그 컴포넌트는 최적화 혜택을 계속 못 받으므로, 근본 원인(대개 React 규칙 위반)을 고치고 걷어내는 것이 정석이다.

Reference