함수가 컴포넌트의 상태에 종속되지 않을 때, 컴포넌트 외부에 적는 게 좋을까? 내부에 적는 게 좋을까?

Q. 함수가 컴포넌트의 상태에 종속되지 않을 때, 컴포넌트 외부에 적는 게 좋을까? 내부에 적는 게 좋을까?

// 🚨 bad
const Component = () => {
  const sum = (a,b) => a + b
  
  return <div>{sum(1,2)}</div>
}

• 최신의 상태를 가질 필요가 없는데 내부에서 재선언이 되어야 할 이유가 없음

// ✅ correct
const sum = (a,b) => a + b

const Component = () => {
  return <div>{sum(1,2)}</div>
}

• 관심사 분리

• 외부 함수가 너무 많아지면 Component.helper.ts로 관리