지시어

function MyComponent() {
  "use memo"; // 이 컴포넌트를 컴파일 대상으로 설정합니다
  return <div>{/* ... */}</div>;
}

// 컴파일 대상으로 설정
function OptimizedComponent() {
  "use memo";
  return <div>This will be optimized</div>;
}

// 컴파일 대상에서 제외
function UnoptimizedComponent() {
  "use no memo";
  return <div>This won't be optimized</div>;
}

// 파일의 최상단에 선언
"use memo";

// 이 파일의 모든 함수가 컴파일됩니다
function Component1() {
  return <div>Compiled</div>;
}

function Component2() {
  return <div>Also compiled</div>;
}

// 함수 수준에서 재정의 가능
function Component3() {
  "use no memo"; // 모듈 수준에서 재정의됩니다
  return <div>Not compiled</div>;
}

// ✅ good - 프로젝트 전역 설정
{
  plugins: [
    ['babel-plugin-react-compiler', {
      compilationMode: 'infer'
    }]
  ]
}

// ⚠️ 필요할 때마 지시어 사용
function SpecialCase() {
  "use no memo"; // 왜 필요한지 문서화하세요
  // ...
}

// ✅ good - 명확한 설명
function DataGrid() {
  "use no memo"; // TODO: 동적 row heiht 이슈 해결 후 제거 (JIRA-123)
  // 복잡한 그리드 구현
}

// ❌ bad - 설명 없음
function Mystery() {
  "use no memo";
  // ...
}

function TemporaryWorkaround() {
  "use no memo"; // TODO: ThirdPartyLib를 v2.0으로 업그레이드한 후 제거
  return <ThirdPartyComponent />;
}

// annotation 모드로 시작
{
  compilationMode: 'annotation'
}

// 안정적인 컴파일러를 컴파일 대상으로 설정
function StableComponent() {
  "use memo";
  // 충분히 테스트된 컴포넌트
}

// 나중에 infer 모드로 전환하고 문제가 있는 컴포넌트는 제외
function ProblematicComponent() {
  "use no memo"; // 제거 전에 이슈를 해결하세요
  // ...
}