고차함수 매개변수 값 관련 질문
23-04-closure 56:46
부분에서 onClick 함수에 id값 바인딩하는 부분을 고차함수로 변환하는 과정에서 이해 안가는 부분이 있어서 질문드립니다!
onClick 이벤트가 실행되면 onClickPage 함수에 리액트에 의해 onClickPage(event)와 같이 event가 들어가는데
이때 hof로 변환하기 위해 조작해서 onClickPage()(event)로 하셨는데 이때 매개변수의 위치를 변환하면은 안되는데 이유를 모르겠습니다.
저는 page든 event든 마지막 로컬 스코프에서 상위 클로저 스코프에 의해 접근 할 수 있기 때문에 가능하다고 생각했습니다.
이 부분이 이해가 안되니 뒷부분인 hoc 부분에서도 많이 헷갈리네요..
답변 주시면 감사드립니다!
답변 1
0
안녕하세요! skw1996님!
react가 아닌 순수 html + javascript에서 확인을 해 보시는게 더 이해가 빠를 것 같아요!
react에서는 event를 자동으로 넣어준다고 하였지만, html에서는 event를 자동으로 넣어주지 않습니다.
따라서, 아래의 그림처럼 작성하셔야 bbb라는 변수에서 event를 받아오실 수 있어요!
<script>
function 나의함수(bbb) {
console.log("bbb: ", bbb.target); // <button> ...
};
</script>
<body>
<button onclick="나의함수(event)">클릭하세요</button>
</body>
위 과정을 바탕으로, 함수를 리턴하는 함수 수업에서 배운 내용에 적용을 해보면 아래와 같습니다.
먼저, 함수를 리턴하는 함수를 만들어 볼게요!
<script>
const 나의함수 = (aaa) => (bbb) => {
console.log("aaa: ", aaa) // 철수
console.log("bbb: ", bbb) // 영희
}
</script>
<body>
<button onclick="나의함수('철수')('영희')">클릭하세요</button>
</body>
마지막으로, 위 철수와 영희자리 중 아무곳에나 event를 넣으시게 되면, 해당 event에 접근하실 수 있답니다!
1. 철수 자리에 event를 넣었을 때
<script>
const 나의함수 = (aaa) => (bbb) => {
console.log("aaa: ", aaa.target) // <button> ...
console.log("bbb: ", bbb) // 영희
}
</script>
<body>
<button onclick="나의함수(event)('영희')">클릭하세요</button>
</body>
2. 영희 자리에 event를 넣었을 때
<script>
const 나의함수 = (aaa) => (bbb) => {
console.log("aaa: ", aaa) // 철수
console.log("bbb: ", bbb.target) // <button> ...
}
</script>
<body>
<button onclick="나의함수('철수')(event)">클릭하세요</button>
</body>
결과적으로, event를 어디에 넣었느냐에 따라서 매핑되는 매개변수로 받아올 수 있어요!
하지만, react에서는 react가 함수의 맨 마지막에 자동으로 (event)를 넣어준다고 했었죠?!
따라서, 항상 마지막자리(위 코드를 기준으로는 bbb자리)에 event가 들어오게 되는 구조랍니다!
위 예제코드는 실제 작동하는 코드이므로 실습하면서 확인해 보세요!^^
fetchBoardsOfMine, fetchBoardsCountOfMine 에러 문의드립니다
0
40
1
댓글 기능 구현 중 질문드립니다.
0
67
1
쿠폰코드 발급
0
140
2
example 서버 플레이그라운드, API 접속 모두 안됩니다.
0
87
2
문의드립니다!! ㅠㅠ
0
104
2
graphql 백엔드 서버가 포폴용 빼곤 접속이 안됩니다.
0
78
2
_app.js 작성 이후로 에러가 발생하네요
0
95
2
학습자료
0
71
2
학습자료가 안열립니다.
0
51
2
플레이 그라운드 퀴즈 문제 질문이 있습니다.
0
61
0
기존강의 구매자, 업데이트 끝인가요?
0
111
3
업데이트 버전 수강
0
89
2
완벽한 프론트엔드
0
136
2
나만의 쇼핑몰 샘플 페이지 접속 확인부탁드립니다.
0
84
1
graphql 접속이 안됩니다.
0
101
2
const, let 사용 질문 드립니다.
0
71
2
싸이월드 만들기 1탄 피드백 부탁드립니다.
0
122
2
회원가입 과제 피드백 부탁드립니다.
0
81
2
styled.span / styled.input "CSS 자동완성"
0
47
1
쿠폰 발급 관련
0
167
2
서버 502 error
0
247
2
쿠폰 다시 부탁드려도 될가여?
0
140
2
a태그 패딩했을때 왜 크기가 줄어들지 않고 늘어나나요
0
185
2
2분 44초 질문
0
132
3