UI컴포넌트 - 1. Context Menu

Wendy·2021년 5월 2일

[강의] 시크릿코드

목록 보기

1/3

첫 강의라 어떤식으로 진행이 되는건지 익히는 기분으로 진행했다.
최근 리액트를 사용했더니, 리액트 없는 JS가 더 어려운것같다ㅜㅜ
js에서 dom을 다루는 문법들을 너무 오랫만에 봐서...

특정 주제를 js/jquery/react로 구현해보고, 정답을 확인하는 방식으로 학습이 진행되는데
주제들도, 옛날에 배운걸 복습하는것도, 각각을 비교하는것도 모두 재밌었다.
문법들을 별개로 배우는것보다 어떤상황에서 쓰이는지를 배우는게 좋았다.

그런데 너무 초보한테는 추천하기 어려울 것 같다.

문제를 보고 대충이라도 생각해볼 수 있어야,
좋은 코드를 보고 아! 할텐데
아에 할줄 모르면 헐... 할것같아서

풀이가 포인트를 알려주는 느낌이지
문법 하나하나를 기초부터 알려주지는 않는다.
(아래 적은 내용들은 모두 나의 추가공부^^..)

또 간혹,
이렇게 쓸 필요는 없을 것 같지만
다양한 기능이 있다는걸 알려주기 위해 넣으셨구나 싶은 것들도 있었다.
너무 초보라면 반드시 이렇게 해야겠다고 오해할지도 모르겠다.

무단공개를 하지 말라는 안내문이 있었으니 중요 내용은 적지 않고,
공부하면서 머리속에 꼬리를 물고 했던 질문들이 무엇이었는지 기록할 예정이다.
(실제 강의랑은 대부분 상관없는 내용들!!)

4. React

리액트가 가장 익숙해서 순서를 바꿔 진행했다.
핵심인 useState를 이용하는건 알고있었는데, 기본 js의 dom관련 기초가 없다는 생각이 들었다.
DOM, reactDOM 이벤트 관련해서 공부를 다시 해야겠다!!

DOM 이벤트

등록
HTML에 인라인으로 HTML과 script를 분리하는게 유지보수에 용이
script에서 on[Event]속성에 추가 속성당 한가지 핸들러만 등록가능(덮어쓰기)
addEventListener 여러핸들러/옵션 사용가능

<button id="elem">클릭해 주세요.</button> //alert 1 -> 4 -> 3 

<script>
  elem.addEventListener("click", () => alert("1"));
  elem.onclick = () => alert(2);
  elem.addEventListener("click", () => alert("3"));
  elem.onclick = () => alert(4);
</script>

흐름
캡쳐 최상단 -> 타깃 (addEventListener에서 옵션을 줘야만 이벤트등록 가능)
타깃 이벤트가 타깃 요소에 도착해 실행 (별도로 처리되지는 않는다)
버블 타깃 -> 최상단

event 속성
target 실제 클릭요소, 변하지 않음
currentTarget 핸들러 동작중인 요소, 호출되는 핸들러에 따라 바뀜, =this
stopPropagation() 버블링 중단 (해당 요소의 나머지 핸들러는 동작)
stopImmediatePropagation() 동일 요소의 나머지 핸들러부터 정지

그렇다면 React에서는?
on[Event] 버블링때 호출
on[Event]Capture 캡쳐링때 호출

react는 DOM 최상위 노드인 document에 리스너를 연결해 모든 이벤트를 처리한다.
-> 캡쳐링 버블링 시간 절약

document.body.addEventListener()

Q. document.body 보다 더 좁게, 특정 태그 하위만 지정해서 이벤트감지 가능?
A. YES,
target.addEventListener에서 target은 주로 element / document / window document.querySelector, document.getElementById, xxxRef.current(리액트) 등으로 element 선택 가능

Q. window / document 가 각각 정확히 뭐지?
A.
window 객체는 브라우저 탭에 존재하는 자바스크립트 전역 최상위 객체
document는 객체는 브라우저에서 로드한 컨텐츠(html 이나 xml 등)를 대변하는 객체
window의 다른 자식들 : navigator, screen, history, location, localStorage, sessionStorage, console, alert, confirm...

. document는 window의 자식인데, window가 전역객체라 window.을 찍지 않아도 쓸수있다.
. 서버사이드 렌더링 시에는 브라우저가 없어서 window를 쓸수없다.
. window, document, element 각각 등록가능한 이벤트가 다르다.

참고 : 이벤트의 기초
참고 : addEventListener 공식문서