15강에서 props 로 function 을 넘겨주는 코드 문의 드립니다

Question

- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. Form 컴포넌트에 선언되어 있던 handleFormSubmit() 을 App 컴포넌트로 이동 후 Form 컴포넌트로 handleFormSubmit() 를 넘겨 주기 위해서 다음과 같이 코드를 작성하는데요. const Form = ({ handleFormSubmit }) => { return ( < form onSubmit = { handleFormSubmit } > < input type = "text" name = "name" placeholder = "영어 대사를 입력해주세요" /> < button type = "submit" > 생성 ) } props 로 handleFormSubmit 형태로 넘겨주지 않고 { handleFormSubmit } 형태로 넘겨주는 이유는 무엇인가요? ( {..} 형태는 html tag 시 react 의 표현식을 넘겨줄 때 사용하는 것으로 이해하고 있었습니다 )

eunju2819 · Answer

아하~ 확인 감사드립니다 ^^

진유림 · Answer

보내주신 코드가 prop을 통해 넘기는 방법이에요~ ㅎㅎ   const Form = ({ handleFormSubmit }) => {   handleFormSubmit();   const Form = (props) => {  props.handleFormSubmit();   위 코드와 아래 코드는 동일합니다.   이는 자바스크립트의 Destructuring(구조 분해 할당) 이라는 문법이에요. https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment   위 링크 보시면 이해갈거예요~!  또 궁금하신 점 있으면 질문 주세요.