React -> DOMContentLoaded 사용 질문드립니다.

[최덕희]

A - tag를 onClick시 B -tag의 스타일 변형을 구현하고자 했습니다.

문제는 A-tag에서 document.querySelector("b태그 클래스")를 해도 B태그를 찾지 못했습니다.
로딩이 끝나지 않고 찾는 것이 문제라 생각하여 

onClick 이벤트를 사용하지 않고 
DOMContentLoaded -> document.querySelector -> click 이벤트 방식으로 구현하여 정상 작동을 하였으나
Log를 찍어보면 DOMContentLoaded 일 때 Log가 2개씩 중복하여 찍히는 것이 확인되었습니다.
( ex) 코드 : DOMContentLoaded -> log("test") // 결과 : "test" "test"

[질문]
1. DOMContentLoaded 2번 씩 찍히는걸 막고 싶으면 뭐라고 검색해야할까요? (검색 키워드가 알고싶습니다.)

2. 위와 같은 상황에서 어떤식으로 접근하여 고민해야하나요? 
(LOG가 2개씩 찍히는걸 보니 뭔가 접근해서 코딩하고 있다는 생각이 들어서요 )

[codingapple]

원래 버튼하나 클릭해도 버튼의 상위 div들 까지 전부 클릭한걸로 간주합니다 

이벤트 버블링이라고 부릅니다

해결책은 버튼 위의 div에 이벤트리스너를 다는게 아니라 버튼에만 달거나 

이벤트 버블링을 막아달라고 코드를 짜거나 그러면 됩니다 

[최덕희]

DOMContentLoaded -> document.querySelector -> click 부분에서

click 이벤트의 버블링 문제는 이해가 갔습니다.

하지만 클릭 이벤트 다 빼고 document.EventLinstor('DOMContentLoaded',)에서 log를 찍어봐도 2번 씩 log가 찍힙니다.

마치 로딩이 2번 씩 된것 처럼 동작하는데 이런 현상은 뭐라고 찾아봐야할까요 ㅠ

[codingapple]

<React.StrictMode> 때문인듯요 

개발단계에선 2번 실행될 수 있습니다 build하고 나면 1번 실행될걸요 

아니면 DOMContentLoaded 말고 useEffect 함수를 쓰거나 그래봅시다 

[글쓴이]

글