[REFACTOR] 이벤트 위임 방식 수정

[bbjbc]

✨ Related Issues

• 이슈 넘버 #85
• 어쩌다 보니 이슈와는 다른 것이 눈에 들어왔네요..

📝 Task Details

• users와 posts 더미 데이터에 더미 이미지를 삽입했어요. (최대한 용량 압축을 했어요.)
• 네비게이션 바에서 상단 로고를 클릭 시 각 메인페이지로 네비게이팅되도록 설정했어요.
• 코드를 살펴보는 과정에서 NoticeDetailItem에서 콘솔창에서 에러가 발생하는 것을 확인했어요. 이것도 DOM 요소를 찾지 못해 발생하는 오류였어요. querySelector로 찾으려는 .admin-notice-detail-button-group 요소가 아직 DOM에 추가되기 전에 접근하려 했기 때문에 appendChild 문제가 발생했던 것 같아요. 그래서 이것도 이벤트 위임 방식으로 해결했어요.

📂 References

https://github.com/user-attachments/assets/3a28fbd2-c524-4348-94f2-336b21f1ca61

💖 Review Requirements

1️⃣ 시도

• 이미지를 최대한 용량 압축을 해서 삽입했는데도 많이 버벅거리고 느려지긴했네요! firebase 연동하면 데이터베이스에 이미지를 삽입하니 버벅임은 조금 줄지 않을까 싶습니다! 일단 너무 밋밋해서 삽입을 했어요.

2️⃣ 고민 사항

• 네비게이션바에 홈 버튼이 있음에도 불구하고 로고를 클릭 시에도 홈 버튼 클릭 시 메인 페이지로 이동하도록 설정했어요.
• UX 측면에서 대부분의 웹사이트에서는 로고를 클릭하면 홈으로 이동이라는 패턴(?)이 확립되었다고 생각해요. 저도 개발을 하면서 메인페이지로 이동할 때 계속 로고를 먼저 클릭하는데 이동이 안되니 사용자 입장으로 보았을 때 많이 불편하다고 생각했어요.
• 또한, 여러 위치에서 같은 기능을 제공한다면 사용자의 실수를 감소할 수 있다고 생각했어요.
• 그래서 사용자들의 행동 패턴과 일치시키기 위해서 로고에도 클릭 이벤트를 삽입했어요.

3️⃣ 트러블 슈팅 아닌 슈팅

setTimeout(() => {
  const logoContainer = document.querySelector('.navbar-top');
  logoContainer.addEventListener('click', () => {
    navigate(ADMIN_PATH.HOME);
  });
}, 0);

저번에도 작성했듯이 처음에는 setTimeout을 사용해서 코드를 작성했어요. setTimeout을 통해서 DOM 요소가 등록되기 전에 이벤트리스너가 실행되고자 하는 것을 방지했어요.

하지만 이는 별로 좋지 않은 선택이라는 것을 알게 됐어요. 이는 불필요한 지연이 발생할 수도 있고 DOM 요소가 실제로 준비됐는지 확실히 알기 어렵기 때문이죠. 그래서 찾아본 것이 바로 이벤트 위임(Event Delegation)이에요.

navbar.addEventListener('click', (e) => {
  if (e.target.closest('.navbar-top')) {
    navigate(ADMIN_PATH.HOME);
  }
});

위 코드가 이벤트 위임을 사용한 코드에요. 즉시 이벤트 리스너를 설정해서 더 빠른 반응이 가능하다고 해요. setTimeout은 DOM 요소의 존재를 보장하지 않지만 이벤트 위임은 동적으로 추가되는 요소들도 자동으로 처리해준대요.

이 외에도 이점들이 더 있어요.

1. 메모리 효율성 향상

• 각 요소마다 이벤트리스너를 추가할 필요가 없어서 메모리 사용이 효율적이에요.

2. 에러 방지

• DOM이 로드되기 전에 이벤트를 등록하려는 시도를 방지할 수 있어요.
• 요소가 없을 때 발생할 수 있는 null 참조 에러를 방지해요.

setTimeout에도 존재하는 이점일지라도 조금 더 나은 방법이라고 해요!

저번에 setTimeout으로 만들었던 코드를 이벤트 위임 방식으로 변경하려고 했는데 상위 컴포넌트로 두 컴포넌트를 거쳐 전달을 해줘야해서 그 부분은 수정하지 않았어요. 좀 많이 복잡해지는 느낌이라서,, 지금으로서는 실용성을 택하도록 하겠어요..

4️⃣ 알게된 점

1. DOM 요소 접근 시점 확인하기

• 무작정 querySelector를 사용했었는데 DOM에 요소가 추가되기 전인지 확인하는 것이 중요한 것 같아요.
• DOM이 만들어지기 전에 접근하면 null을 반환할 수 있어 존재 여부를 체크하는 습관이 필요할 것 같아요.

2. 안전하게 DOM 조작하기

• querySelector로 찾은 요소가 있을 때만 appendChild와 같은 메서드를 사용하도록 해야 해요.
• 조건문으로 분기 처리를 해서 안전하게 DOM을 다뤄야 할 것 같아요.

const element = document.querySelector('.any-element');
  if (element) {
    element.appendChild(childElement);
  }

3. 이벤트 위임 사용

• 처음부터 이벤트 위임으로 에러 가능성을 막을 수 있어요.
• DOM이 생성되기 전에 위와 같은 문제를 피하기 위해서는 이벤트 위임이나 분기 처리가 필요할 것 같아요.