자바스크립트에서 on과 handle의 관계에 대해 알아보았다.

 

바닐라 자바 스크립트로 컴포넌트 구현,  api 로 데이터를 가져오는 작은 과제를 하는데 "바닐라", "컴포넌트"로 하려니 ㅇ-ㅇ 상태되어서 아무것도 못하겠더라. 리액트는 잘 모르고 스벨트는 좀좀따리 강의를 듣는 중이라 스벨트로 구현하고 바닐라로 옮길 계획을 세웠다. 확실히 스벨트로 하니 신경쓸게 적어서 좋았다. 하나의 컴포넌트가 하는 일은 하나의 파일에서만 작성하면 되니까 하나의 파일에서 handle을 정의하고 내려줄 일이 적어지니 참 편했다. 모르겠는 부분은 문서와 구글링, ai 도움 조금으로 금방 해결됐다. 

 

그리고 이 완성된 파일들을 ai에게 자바스크립트 컴포넌트 파일로 변환하라고 "시켰"더니 "해줬"다. 파일을 열어 코드를 뜯어보는데 app.js 파일 갔다가 컴포넌트 파일 갔다가 와리가리를 너무 많이 해야만 흐름이 파악되길래 정신이 없더라. 컴포넌트 내의 on함수와 app.js에서의 handle함수를 연결하는게 제일 혼란스러웠다. 처음 봤을땐 on은 콜백함수의 이름이라는 개념을 정확히 몰랐기 때문에 왜 여기서 할일을 저기서 해서 가지고 오는거지? 왜지? 하는 생각만 계속 했다. 

 

ai 에게 왜 이런식으로 하냐, 라고 물어보니. 컴포넌트는 "이벤트의 발생"만 알려주고, 그 이후의 작업은 app.js에서 로직 처리 후 콜백함수로 컴포넌트에 넘겨줍니다. 라고 하더라. 

 

왜?! 

 

그냥 그런 패턴인 것이다. 관심사를 분리하고자 하는게 콜백함수를 넘겨주는 이유라고 한다. 즉, 컴포넌트 파일은 UI와 이벤트 발생에만, app.js 파일은 로직 처리만 집중적으로 함으로써 재사용 하기 쉬워지고 유지보수가 용이해진다. (라고 한다. )