React에서 요소에 접근하는 방법, useRef vs getElementById

시작하며React에서 요소에 접근하는 방법으로 크게 두 가지가 있는데요. useRef를 사용하는 방식과, document.getElementById를 사용하는 방법입니다. 이 글에서는 useRef와 getElementById를 비교하고, 어떤 방식을 사용하는 게 좋을지 설명합니다. getElementById로 요소 접근하기getElementById는 전통적인 JavaScript 메서드로, HTML 문서에서 특정 ID를 가진 요소를 선택할 때 사용됩니다.const element = document.getElementById('myElement'); useRef로 요소 접근하기useRef는 React Hook 중 하나로, 함수형 컴포넌트에서 DOM 요소에 접근할 수 있게 해 줍니다.const MyCompon..

• format_list_bulleted JavaScript/React
• · 2024. 5. 19.
• textsms

react에서 요소의 width와 height 구하기

시작하며프로젝트를 진행하다 보면, 요소의 width와 height값을 가져와 다른 요소의 크기를 조정하거나, 스크롤 위치 조정을 할 일이 발생합니다. 반응형 웹에도 많이 사용되고요. 이때 사용할 수 있는 값이 offsetWidth / offsetHeight, clientWidth / clientHeight 등이 있는데요. 기존의 자바스크립트에서는 아래와 같이 간단한 방법으로 값을 가져올 수 있었습니다. var clientHeight = document.getElementById('container').clientHeight; 하지만, React에서는 document.getElementId와 같은 직접적인 DOM 접근을 지양하고 있기 때문에 ref를 사용하여 컴포넌트 내부의 특정 DOM 요소에 접근하는 것..

• format_list_bulleted JavaScript/React
• · 2024. 5. 19.
• textsms

[ERROR] React Hooks must be called in a React function component or a custom React Hook function.

시작하며React를 사용하다 보면 "React Hooks must be called in a React function component or a custom React Hook function."이라는 ESLint 오류를 접할 수 있습니다. React를 처음 사용하며 블로그나 문서를 통해 eslint를 설치하거나, Create React App으로 React를 공부하기 시작했다면 어느 순간 만나게 되는 오류일 것입니다. 이 오류는 React 애플리케이션의 무결성과 예측 가능성을 유지하는 데 매우 중요합니다. 이 오류가 무엇을 의미하는지, 왜 발생하는지, 그리고 어떻게 해결할 수 있는지 자세히 알아보겠습니다. React Hooks란 무엇인가요? 이 오류가 발생했다면 이미 훅에 대한 내용을 알고 있겠지만,..

• format_list_bulleted JavaScript/React
• · 2024. 5. 17.
• textsms