복습할 내용
C++ 에서 pass by value, pass by reference, passing function, array, pointer

A. 화살표 함수를 써야하는 이유

const handleDelete = (index: number) => {
  const newTodos = [...todos];
  newTodos.splice(index, 1);
  setTodos(newTodos);
};

<button onClick={()=>handleDelete(index)}> Delete </button>
// 1

const handleDelete = () => {
  const newTodos = [...todos];
  newTodos.pop();
  setTodos(newTodos);
};

<button onClick={handleDelete}> Delete </button>
// 2

화살표 함수의 장점:
onClick을 실행할 때 실행하는 event listener 는 event handler 가 뭐가 필요한지와는 상관 없이 event를 argument로 전달해주는데 event handler는 다른 parameter (위 예제의 경우에 index) 가 필요한 경우가 있다.
그냥 함수 variable을 전달하면 불가능 (2번) 화살표 함수 (1번)은 다른 parameter를 받을 수 있다.

---

B. 만약 함수의 return 값이 함수라면?

const handleDelete = (index: number) => {
  return (index) =>{
    const newTodos = [...todos];
    newTodos.splice(index, 1);
    setTodos(newTodos);
  }
};

<button onClick={handleDelete(index)}> Delete </button>

우리는 event listener 인 onClick에 함수를 전달해야 한다. 여기서는 handleDelete()의 return 값이 함수이기 때문에 함수를 실행 ()해야 내가 전달하고 싶었던 nested 함수를 전달할 수 있다.

A+B. 더 나아가기

그럼 event handler 함수의 return 값이 함수이고 event listner에 이 event handler 함수를 화살표 함수로 전달하고 싶으면 어떨까?

const handleDelete = (index: number) => {
  return () =>{ 
    const newTodos = [...todos];
    newTodos.pop();
    setTodos(newTodos);}
};

<button onClick={()=>handleDelete(index)()}> Delete</button>
// 1

Note: return 값으로 부르는 함수는 closure 덕분에 parameter 를 안 넣어줘도 된다. return (index)

---

본 후기는 [한글과컴퓨터x한국생산성본부x스나이퍼팩토리] 한컴 AI 아카데미 (B-log) 리뷰로 작성 되었습니다.

#한컴AI아카데미 #AI개발자 #AI개발자교육 #한글과컴퓨터 #한국생산성본부 #스나이퍼팩토리 #부트캠프 #AI전문가양성 #개발자교육 #개발자취업