• 카테고리

    질문 & 답변
  • 세부 분야

    풀스택

  • 해결 여부

    해결됨

props 를 넘겨줄 때 함수를 그대로 넘겨줄 때와 화살표 함수로 감싸서 넘겨줄 때의 차이가 궁금합니다 :)

23.05.14 17:06 작성 23.05.14 17:14 수정 조회수 246

0

onUpdate={onUpdate}
onDelete={() => onDelete(x.id)}
startEdit={() => setEditingId(x.id)}
isEditing={editingId === x.id}

안녕하세요 선생님 강의 정말 잘 보고 있습니다!

 

컴포넌트에서 Props를 넘겨 줄 때

onUpdate={onUpdate}

이렇게 넘겨줄 때와

onDelete={() => onDelete(x.id)}
startEdit={() => setEditingId(x.id)}

 

이렇게 넘겨줄 때의 차이가 궁금합니다.

콘솔로 찍었을 때는 둘 다 함수로 표기되는데

함수를 그대로 넘겨주는 것과 화살표함수로 감싸서 넘겨주는 것이 어떤 차이가 있는지 잘 모르겠습니다..!

제가 이해한 바로는 onDelete / startEdit은 버튼 이벤트 역할로 버튼 클릭시 즉시 실행되는 함수이기 때문이고

onUpdate는 mutate로 인자를 전달 받는 함수로 onSubmit 함수 안에서 실행되기 때문에 그런 것 같은데

제가 이해 한 바가 맞는지 궁금하여서 질문드립니다~!

 

바쁘실텐데 질문 드려서 죄송합니다 ^^;;

 

그리고 ...

 

선생님의 유튜브 멘토링 영상을 보고

입사 4개월차 주니어 개발자로서 앞으로 어떻게 나아가야할 지 많은 생각을 하게 되었고 큰 도움을 얻었습니다.

정말 감사드립니다..!

열심히 해서 언젠가 좋은 소식 전해드리고 싶습니다.

항상 건강하세요!

 

답변 1

답변을 작성해보세요.

1

1)

const handleClick = e => { ... }
onClick={handleClick}

이 경우 click시에 handleClick 함수가 곧바로 호출됩니다. 이 때 인자에는 event(클릭이벤트) 객체가 자동으로 전달됩니다.

2)

const handleMouseEnter = id => { ... }
onMouseEnter={() => handleMouseEnter('a')}

이 경우 mouseEnter시 handleMouseEnter가 아니라, () => handleMouseEnter('a')라는 새로운 함수가 호출됩니다. 인자로 event(마우스오버이벤트)가 전달되지만, '새로운 함수'가 인자를 받지 않으므로 무시됩니다.

즉 1)은 '앞서 만든 함수를 그대로 호출'하는 반면, 2)는 '앞서 만든 함수를 다시 새로운 함수로 감싸서 호출'한다는 점이 다릅니다.

별도의 인자를 요구하지 않거나 이벤트만으로 충분한 일반적인 케이스에는 1)로 충분한 반면,

호출시 별개의 인자를 넘겨줘야 하는 경우(예: handleMouseEnter('a')) 2)의 방식을 따르면 됩니다.

밀크티님의 프로필

밀크티

질문자

2023.05.14

빠른 답변 감사합니다~! 남은 주말 평안하시고 행복한 차주 되세요!