useRef

2 posts

[React] forwardRef 사용법

React 컴포넌트에 ref prop을 넘겨서 그 내부에 있는 HTML 엘리먼트에 접근을 하게 해주는 forwardRef() 함수에 대해서 알아보겠습니다. HTML 엘리먼트의 ref prop React에서 ref prop은 HTML 엘리먼트의 직접 접근하기 위해서 사용됩니다. 예를 들어, 아래 <Field/> 컴포넌트에서는 useRef() 훅(hook) 함수로 생성한 inputRef 객체를 <input/> 엘리먼트의 ref prop으로 넘기고 있습니다. 이렇게 해주면 inputRef 객체의 current 속성에 <input/> 엘리

[React] ref로 HTML 엘리먼트에 접근/제어하기

React로 웹 애플리케이션을 개발하다 보면 간혹 React 컴포넌트가 아닌 HTML 엘리먼트에 직접 접근해서 DOM API를 이용해서 제어해야 할 필요가 있는데요. 이번 포스팅에서는 이럴 때 유용하게 사용할 수 있는 React의 독특한 prop인 ref 에 대해서 알아보도록 하겠습니다. ref prop React의 ref prop은 HTML 엘리먼트의 레퍼런스를 변수에 저장하기 위해서 사용합니다. 예를 들어, 다음과 같이 <input> 엘리먼트에 ref prop으로 inputRef라는 변수를 넘기게 되면, 우리는 이 inputRe