React props로 함수 전달에서 의문점 해소

아래는 EmotionItem 콤포넌트에 props들을 전달하는데 onClick props에 handleChangeEmotion이라는 함수를 만들어서 전달한다. 그 함수는 emotionId라는 매개변수를 받아서 state변수에 업데이트 하는데...

 

Editor.js

여기서 의문점이 생기는데 감정 이미지 선택 섹션에서 클릭한 이미지 번호를 매개변수 emotionId에 저장하는건가?

**(EmotionItem은 아래와 같이 emotionList의 배열에서 map함수를 이용해서 이미지 5개를 각각렌더링함)

어떻게 클릭한 이미지 번호를 매개변수로 받을 수 있는거지? EmotionItem컴포넌트는 아직 emotoinId태그도 가지고있지 않다.(emotionList 배열의 낱낱의 요소인 객체 id에 emotionId 프로퍼티도 존재x)

 

 

EmotionItem.js

 

emotionItem onclick시 이벤트핸들러에서 onclick 함수를 실행하는데 거기에 id 주는거랑 연관되어 있을 것이라고 가정했다.

 

의문점해소

부모 콤포넌트로 받은 props 객체할당하면 onClick에는 결국 handleChangeEmotion이 할당된다

이벤트 핸들러 이름이랑 실제로 handleOnClick 안에서 실행하는 함수(부모컴포넌트로 받은 props)랑 헷갈렸음

 

onClick에 할당한 handleChangeEmotion함수

console.log(onClick) 출력화면

결론

결국 Emotion.js에서 onClick(id)를 실행한다는 것은 map함수로 생긴 각 컴포넌트의 id를 handleChangeEmotion함수의 에 매개변수 emotionId로 넣어서 실행한다는 것이랑 같은 의미