React Compiler 지시어

01무엇

지시어는 특정 함수의 컴파일 여부를 직접 지정하는 문자열 리터럴이다. 두 개뿐이다.

"use memo"    // 이 함수를 컴파일 대상에 넣는다
"use no memo" // 이 함수를 컴파일에서 뺀다

02무슨 일이 일어나나

지시어는 함수 본문 맨 앞 또는 파일(모듈) 맨 위에 놓는다. 모듈 맨 위에 두면 그 파일의 모든 함수에 적용되고, 개별 함수 안의 지시어가 그 모듈 설정을 덮어쓴다.

효과는 compilationMode에 달렸다. 'annotation' 모드에서는 "use memo"가 붙은 함수만 컴파일된다. 'infer' 모드에서는 컴파일러가 알아서 판단하되 지시어가 그 판단을 덮는다. 'all' 모드에서는 전부 컴파일되고 "use no memo"로 특정 함수만 뺀다.

03사용법

"use memo"는 annotation 모드에서 대상을 명시하거나, infer 모드의 자동 판단을 강제로 켤 때 쓴다.

function OptimizedComponent() {
  'use memo'
  return <div />
}

"use no memo"는 컴파일된 결과가 문제를 일으키거나, React 규칙을 지키지 않는 외부 코드와 엮일 때 임시로 빼는 용도다.

function LegacyWidget() {
  'use no memo'
  return <div />
}

04실무 예시

컴파일 후 동작이 이상한 컴포넌트를 찾았을 때, 원인을 고치기 전까지 임시로 제외하는 패턴이다. 왜 뺐는지와 언제 되돌릴지를 주석으로 남긴다.

export function ThirdPartyChart(props: ChartProps) {
  // TODO: 차트 라이브러리 ref 변이 문제 해결 후 제거 (#1234)
  'use no memo'
  return <Chart {...props} />
}

05왜 중요한가

지시어는 자주 쓸 물건이 아니라, 필요할 때 있어야 하는 안전장치다. 점진 도입(annotation 모드)에서는 "use memo"로 대상을 하나씩 늘려 가고, 문제 컴포넌트를 만나면 "use no memo"로 급한 불을 끈다. 남용하면 최적화 범위가 들쭉날쭉해지니, 어디까지나 예외로만 두는 게 맞다.

Reference