[리액트] 콜백 함수와 매개변수 사용

문제 설명

내가 원하는 동작

- 공유 버튼 클릭시, <sharedFolderModal>이 뜬다.

- <sharedFolderModal> 안에 있는 '링크 복사' 버튼을 클릭시,

  클립보드에 복사하는 <handleCopyClipboard> 함수에 복사되길 원하는 링크 주소를 매개변수로 넘겨 실행한다.

 

실제 동작

- 공유 버튼 클릭시, <handleCopyClipboard>가 바로 동작한다 (그것도 연속 두 번이나)

- <sharedFolderModal> 안에 있는 '링크 복사' 버튼을 클릭해도 복사되지 않는다.

 

모달에 있는 복사하기 버튼을 클릭했을 때 복사가 되어야하는데, 모달창이 뜨는 버튼을 누를 때 동작함

// handleCopyClipBoard : 클립보드에 복사하는 함수

// sharedFolderModal.jsx
<S.SharedButton
 	onClick={
 	handleCopyClipBoard(
    	"https://codingaring-week11-linkbrary.netlify.app"
    )}>
    <S.CopyIcon />
    <S.IconText>링크 복사</S.IconText>
</S.SharedButton>

---

원인과 해결법

콜백 함수로 넘겨주는 함수는 함수의 이름만 작성해야함

- <sharedFolderModal>에서 매개변수와 같이 넘겨주었기 때문에 모달 파일이 불러와질 때 같이 호출이 되어버린 것

 

해결법은 간단했다.

아래와 같이, 내가 호출하려는 함수와 매겨변수를 함께 익명 함수로 한 번 더 감싸주면 된다!

<S.SharedButton
	onClick={() => {
    	handleCopyClipBoard(
        	"https://codingaring-week11-linkbrary.netlify.app"
        );
    }}
>
    <S.CopyIcon />
    <S.IconText>링크 복사</S.IconText>
</S.SharedButton>

 

* 마침 오늘 읽은 자바스크립트 딥다이브(12장 함수)에서 나온 내용이었는데,

이렇게 내가 짠 코드에서 바로 깨닫게 되다니 신기하고 앞으로 조금 더 꼼꼼히 읽고 스스로 생각을 많이 해봐야겠다고 생각했다.