15강에서 props 로 function 을 넘겨주는 코드 문의 ... - 인프런

만들면서 배우는 리액트 : 기초

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

작성

231

- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! 
- 먼저 유사한 질문이 있었는지 검색해보세요. 
- 서로 예의를 지키며 존중하는 문화를 만들어가요. 
- 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요.

Form 컴포넌트에 선언되어 있던 handleFormSubmit() 을 App 컴포넌트로 이동 후 Form 컴포넌트로 handleFormSubmit() 를 넘겨 주기 위해서 다음과 같이 코드를 작성하는데요. 

const Form = ({ handleFormSubmit }) => {
return (
<form onSubmit={handleFormSubmit}>
<input type="text" name="name" placeholder="영어 대사를 입력해주세요" />
<button type="submit">생성</button>
</form>
)
}

props 로 handleFormSubmit 형태로 넘겨주지 않고 {handleFormSubmit} 형태로 넘겨주는 이유는 무엇인가요? 

( {..} 형태는 html tag 시 react 의 표현식을 넘겨줄 때 사용하는 것으로 이해하고 있었습니다 )

props javascript react

답변 2

eunju2819

질문자

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

진유림

지식공유자

보내주신 코드가 prop을 통해 넘기는 방법이에요~ ㅎㅎ

const Form = ({ handleFormSubmit }) => {
handleFormSubmit();

const Form = (props) => {
props.handleFormSubmit();

위 코드와 아래 코드는 동일합니다.

이는 자바스크립트의 Destructuring(구조 분해 할당) 이라는 문법이에요.

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment

위 링크 보시면 이해갈거예요~!

또 궁금하신 점 있으면 질문 주세요.

인프런 커뮤니티 질문&답변

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