2024/11/15 2

리액트 훅 깊게 살펴보기(useImperativeHandle,useLayoutEffect,useDebugValue)

3.1.8 useImperativeHandle 실제 개발 과정에서는 자주 볼 수 없는 훅으로 널리 사용되지는 않는다. useImperativeHandle를 이해하기 위해서는 먼저 React.forwardRef에 대해 알아야 한다. forwardRef 살펴보기ref는 useRef에서 반환한 객체로, 리액트 컴포넌트의 props인 ref에 넣어 HTMLElement에 접근하는 용도로 흔히 사용된다.ref를 상위 컴포넌트에서 하위 컴포넌트로 전달하고 싶다면? 그러나 직접 props로 넣어 사용할 수 없다면? forwardRef를 사용하면 네이밍의 자유가 주어진 props보다 더 확실하게 ref를 전달할 것임을 예측할 수 있고,사용하는 쪽에서도 안정적으로 받아 사용할 수 있다. const ChildCompone..

카테고리 없음 2024.11.15

리액트 훅 깊게 살펴보기(useReducer, useRef)

3.1.5 useRef useRef와 useState는 동일하게 컴포넌트 내부에서 렌더링이 일어나도 변경 가능한 상태값을 저장한다는 공통점이 있다. useState와 구별되는 큰 차이점 두 가지useRef는 반환값인 객체 내부에 있는 current로 값에 접근 또는 변경할 수 있다.useRef는 그 값이 변하더라도 렌더링을 발생시키지 않는다.useRef로 useState를 흉내내도 렌더링이 되지 않는다.  useRef가 왜 필요할까? useRef는 컴포넌트가 렌더링될 때만 생성되고, 컴포넌트 인스턴스가 여러 개라도 각각 별개의 값을 바라본다. useRef의 가장 일반적인 사용 예는 DOM에 접근하고 싶을 때 이다.function RefComponent () { const inputRef = useRef(..