[JS] 함수 헷갈리는 부분 : 값을 넘기는 것과 참조값을 넘기는 것의 차이

리액트를 공부하며 유튜브를 클론 코딩하던 중 혼자 해결하지 못하고 있던 부분이 있어서 강사님 코드와 비교해보니

 

//내 코드
onClick = {onVideoClick(video)}

//강사님 코드
onClick = {()=> onVideoClick(video)}

 

위 코드처럼 강사님은 화살표 함수를 사용하셨다

 

이해가 잘 안가서 Q&A 게시판을 살펴보니 나와 같은 고민을 하는 사람이 많아서 신기했다ㅎㅎ

 

 

결론적으로 위 두 코드의 차이점은 ↓

//onVideoClick을 호출하고 리턴되는 값 자체를 value1에 할당하는 것
const value1 = onVideoClick(video)


//onVideoClick을 호출할 함수를 value2에 할당하는 것, 참조값을 전달하는 것
const value2 = () => onVideoClick(video)

 

간단히 설명하면 위 코드는 결과값을 전달하는 것이고 밑에 코드는 함수의 참조값을 전달하는 것이다

 

별 차이 없는거 같은데 완전 다른거였다니.... 헷갈리지 않게 엘리님 영상보면서 함수 부분 다시 정리하고 넘어가야겠다!!!

 

https://www.youtube.com/watch?v=-cAPq25P-68