[TIL] 2023-01-16

• 리액트 동작 원리 공부 중, 컴포넌트 속성 중 이벤트 속성에 대해 알아봄

  • 사용자가 화면 UI에서 버튼을 누르거나 텍스트를 입력하는 등의 행위가 발생하면 이를 화면 UI를 구현하는 코드 쪽에 알려줘야함 => 이처럼 마우스 클릭, 텍스트 입력과 같은 사용자 행위가 일어날 때 이벤트가 발생했다고 표현

    DOM_객체.addEventListener(이벤트_이름: string, 콜백_함수: (e: Event) => void)

  • 물리 DOM 객체의 이벤트 속성

    const root = document.getElementById('root');
    if(root) {
    root.onclick = (e: Event) => console.log("click");
    

  • 리액트 컴포넌트 이벤트 속성

    • 리액트 컴포넌트의 이벤트 속성에 설정하는 콜백 함수는 매개변수 e의 타입이 Event가 아니라 리액트가 제공하는 SyntheticEvent 타입을 설정해야함

    • 이벤트 버블링, 이벤트 캡처링

    • 이벤트 버블링 => 자식 요소에서 발생한 이벤트가 가까운 부모 요소에서 가장 먼 부모 요소까지 계속 전달되는 현상

    • e.stopPropagation()

  • <input> 요소의 이벤트 처리 (onChange)

  • 드래그 앤 드롭 이벤트 처리

    • 프로젝트에서 사진 업로드 부분을 드래그앤 드롭으로 구현했는데, 그때는 기능 구현에 초점을 맞춰서 기본에 충실하지 못했음. => 기본 원리를 다시 알게됨.

[참고 자료]

https://www.notion.so/TIL-2023-01-16-1ecab84fe1da4da18ed0090333692d70 구체적인 내용