-
useRef, useImperativeHandleWeb Dev/3. React 관련 2021. 5. 19. 17:19728x90
https://react.vlpt.us/basic/10-useRef.html
useRef 이거가 젤 잘 이해가되서 그냥 메모해둔다. useRef는 Dom에 바로 접근할 일이 생겼을때 사용한다.
https://react.vlpt.us/basic/10-useRef.html
이것도 잘되있다. useRef는 vanilla js에서 querySelector 같은걸 사용하는걸 대체하는 용도이다. dom접근을 useRef를 통해서 한다.
https://reactjs.org/docs/hooks-reference.html#useimperativehandle
useImperativeHandle은 라이브러리 개발하는 경우에 필요할만한 기능이다. 그냥 앱만들때는 앵간하면 쓸일이 없다.
useImperativeHandle customizes the instance value that is exposed to parent components when using ref. As always, imperative code using refs should be avoided in most cases.
parent에 노출되는 instance의 값을 customizing 할때 쓰이는데, ref가 항상 쓰인다. 만약에 input의 validation을 체크하는 라이브러리를 개발한다거나 했을때, 오류인 값에 대해서 focus할 수 있도록 library consumer에게 기능을 제공해야한다. 이때 라이브러리 내부에서 useRef를 통해서 input element에 접근하고, focus와 같은 기능을 useImperativeHandle을 통해서 parent에게 제공한다. 그래서 parent가 라이브러리 내의 input elem에 focus를 할 수 있도록 기능을 제공하는 것이다.
'Web Dev > 3. React 관련' 카테고리의 다른 글
hydration (0) 2021.05.19 lazy, Suspense (0) 2021.05.19 useEffect vs useLayoutEffect (0) 2021.05.19 useEffect 내에서 state를 변화하고, 내부에서 함수를 호출했을때, 왜 변화한 state가 보이지 않는가? (0) 2021.05.19 React관련 싹 훑기(1) - Complete Intro to React v6 (0) 2021.05.17