[React] 자식 컴포넌트에서 함수 끌어올리기가 안 될 때, 두 번씩 함수가 불러질 때

모달을 만드는 와중에 에러가 났다

상황 ❗

자식컴포넌트에서 버튼을 클릭하면, 부모컴포넌트에 있는 함수가 실행되게 하고 싶다.

// Parent.jsx

function loging(userlog:string){
  console.log(userlog)
}

<Child loging={loging} userlog={userlog}/>

// Child.jsx

const Child({loging, userlog}:any) = {
 function sendlog(userlog:any){
   loging(userlog)
 }
}

<button onClick={()=>sendlog(userlog)}>로그!</button>

이렇게 props 이름 다 맞춰도 함수가 두 번씩 is not function 에러를 내뿜을 때

SOLUTION ✅

부모 컴포넌트에서

// Parent.jsx
❌ function loging (){ }
✅ const loging = () => {}

화살표함수로 만들어주면 작동한다.

왜인지는 이제 알아가야 함.

오늘도 꾸역꾸역 돌아가는 내 서비스 ㅎㅎㅎ