고차함수 매개변수 값 관련 질문

23-04-closure 56:46 스크린샷 2023-06-13 오후 6.42.19.png 부분에서 onClick 함수에 id값 바인딩하는 부분을 고차함수로 변환하는 과정에서 이해 안가는 부분이 있어서 질문드립니다!

onClick 이벤트가 실행되면 onClickPage 함수에 리액트에 의해 onClickPage(event)와 같이 event가 들어가는데
이때 hof로 변환하기 위해 조작해서 onClickPage()(event)로 하셨는데 이때 매개변수의 위치를 변환하면은 안되는데 이유를 모르겠습니다.
저는 page든 event든 마지막 로컬 스코프에서 상위 클로저 스코프에 의해 접근 할 수 있기 때문에 가능하다고 생각했습니다.
이 부분이 이해가 안되니 뒷부분인 hoc 부분에서도 많이 헷갈리네요..

답변 주시면 감사드립니다!

안녕하세요! 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가 들어오게 되는 구조랍니다!

위 예제코드는 실제 작동하는 코드이므로 실습하면서 확인해 보세요!^^

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