React에서 document.getElementById 써도 괜찮은가요

React를 사용하면 DOM API 사용은 지양해야한다는 논지의 이야기들이 많이 있는데, 무조건 사용하지 말라는 이야기가 아닙니다. 하지만 React의 동작 원리와 랜더링 과정에 대한 이해가 부족한 상태로 DOM API를 사용하게 된다면 불필요한 리랜더링과 과도한 메모리 사용등의 사이드 이펙트가 발생하기 때문에 일단 쓰지 말아라 하는 것이죠. 제 개인적인 생각으로는, 단순히 HTML element의 attribute를 가져오는데 사용하는 것은 괜찮다고 생각합니다. 오히려 걱정되는 부분은 Id로 Element를 찍는 것인데요. 문서 내에서 유일한 id를 가지는 요소인지 다시 한번 확인해보시고 사용하셨으면 합니다. 마지막으로, DOM API를 사용하는 코드는 함수화 하여 별도의 파일에 고립시켜놓는 편이 추후 유지보수하기 더 용이할 것입니다. 도움이 되었으면 좋겠습니다. ** 명확한 의도가 있는 코드는 틀린 코드가 아닙니다. 왜 이 코드가 필요한지 스스로에게 먼저 물어보시고, 그 답변이 만족스러운지 확인해보세요

리액트상에서 dom에 직접 접근 수정 하는방법은 좋지 않습니다. 이때 만약 단순히 정보만 가져오는거면 상관없지만 dom을 변경할때 문제가 생깁니다. 리액트 라이프 사이클 과 리액트 리렌더링 순서를 찾아보는걸 권해드립니다

"리액트 라이프사이클을 고려해 보았을 때 getElementById를 써도 앱에 아무런 문제가 없었다. 그래서 사용했다. 유니크 아이디를 썻으므로 다른 요소를 선택할 문제도 없고 엘리먼트가 사라졌을 때를 대비해서 예외처리도 해두었다" 저 같으면 이렇게 대답할 듯 합니다.

React에서는 일반적으로 DOM 요소에 접근하기 위해 ' useRef '와 같은 React-specific 기능을 사용하는 것이 권장되지만, 경우에 따라 ' document.getElementById '를 사용할 수도 있습니다. 그러나 이를 사용하면 직접 DOM 조작이 발생하므로, 최대한 피하는 것이 좋습니다. 문제 상황을 고려해 보았을 때, ' useRef '를 사용하는 것이 어렵다면 다른 해결책을 찾아보는 것이 좋습니다. 예를 들어, 부모 컴포넌트에서 ' useRef '를 사용하여 자식 컴포넌트에 접근하고, 그 자식 컴포넌트의 위치 정보를 가져와서 Recoil 상태를 업데이트하는 방법을 사용해 볼 수 있습니다. 최근 React Interview에서는 React의 핵심 개념에 대한 이해와 사용 경험을 중점으로 평가하므로, 가능한 React의 Best Practice를 따르는 것이 좋습니다. 만약 면접에서 해당 질문이 나온다면, 왜 ' document.getElementById '를 사용했는지 이유를 설명하고, 가능한 대안을 제시하는 것이 좋습니다. 결론적으로, ' document.getElementById '는 React에서 권장되지 않는 방법이지만, 특별한 상황에서 사용할 수 있습니다. 그러나 가능하면 React의 Best Practice를 따르는 것이 좋으며, 면접에서 이에 대한 질문이 나오면 그 이유와 대안을 제시하는 것이 좋습니다. ----- ✅ Chat GPT의 답변을 평가해 주세요! - 틀린 내용은 없는지, 답변이 도움이 되었는지 댓글로 작성해 주세요.