"use memo" 지시어

01무엇

"use memo"는 함수를 컴파일러 최적화 대상으로 표시하는 지시어다. 함수 본문 맨 앞에 문자열 리터럴로 둔다.

function MyComponent() {
  'use memo'
  // ...
}

02무슨 일이 일어나나

이 지시어가 붙은 함수를 컴파일러가 분석해 자동 메모이제이션한다. 효과는 compilationMode에 따라 다르다.

• annotation 모드 — "use memo"가 붙은 함수만 최적화된다. 최적화하려는 함수마다 반드시 붙여야 한다.
• infer 모드(기본) — 이름 규칙으로 컴포넌트·훅을 자동 감지한다. 지시어는 필요할 때 최적화를 강제한다.
• all 모드 — 어차피 전부 최적화되므로 지시어는 불필요하다.

즉 이 지시어가 가장 의미 있는 곳은 annotation 모드다.

03사용법

문자열 리터럴로, 함수 본문의 맨 앞(주석은 앞에 와도 됨)에 정확히 "use memo"라고 쓴다. 백틱은 안 되고, 처리되는 건 함수의 첫 지시어 하나뿐이다.

// annotation 모드: 이 함수는 최적화된다
function OptimizedList() {
  'use memo'
  // ...
  return <ul>{/* ... */}</ul>
}

// 지시어가 없으면 annotation 모드에선 최적화되지 않는다
function SimpleWrapper() {
  return <div />
}

04실무 예시

컴파일러를 점진 도입할 때, annotation 모드로 두고 리프 컴포넌트부터 하나씩 지시어를 붙여 위로 올라간다. 검증된 함수만 최적화 대상에 넣는 방식이다.

function PriceChart({ series }: { series: number[] }) {
  'use memo' // 이 컴포넌트를 최적화 대상에 넣는다
  // ...무거운 계산·렌더
  return <svg>{/* ... */}</svg>
}

05왜 중요한가

infer 모드에서는 대체로 필요 없다. 어떤 컴포넌트가 안 잡히면 지시어로 억지로 켜기보다 이름 규칙(PascalCase·use 접두사)을 고치는 편이 낫다. 이 지시어가 진짜 쓸모 있는 건 annotation 모드로 점진 도입할 때뿐이라, 도입 전략과 짝지어 이해하면 된다.

Reference