728x90 useRef2 [React] useRef 하나로 여러 데이터 관리하기 (feat. ag-grid) 목표: 하나의 useRef 로 현재 Grid 데이터 저장하기 의도: 반복문으로 감싸진 Grid 컴포넌트에 useRef 를 각각 세팅하기가 어려워서, 하나의 useRef 를 통해 여러 Grid 데이터를 관리하고 저장할 수 있도록 하고 싶었다 기능: Grid 추가 버튼을 누르면 Grid 가 추가되고 - 사용자가 Grid 내용을 변경하면 - 변경한 값을 저장한다 방법: useRef 초기값을 null 이 아닌 [] (빈 배열) 로 세팅하여, 하나의 useRef 로 여러 Grid 데이터를 관리한다 부모 컴포넌트 const gridRef = useRef([]) export const Parent = () => { return ( 배열.map((item, idx) => ( )) ) } gridRef 에 빈 배열을 .. 2024. 1. 18. [React] forwardRef 사용법 (useRef, useImperativeHandle...) (함수형 컴포넌트에서) 부모 컴포넌트에서 자식 컴포넌트 안의 DOM element에 접근하고 싶다면? forwardRef를 사용해야 한다. 회사에서 프로젝트를 진행하던 중, 부모 컴포넌트에서 자식 컴포넌트 안의 함수를 사용해야 하는 경우가 생겼다. 자식 컴포넌트에서 부모 컴포넌트의 함수를 사용하려면 props를 사용하면 되었지만 그 반대의 경우는 경험해 본 적이 없어서 어떤 방식이 있는지 찾아보다 forwardRef라는 Hook을 발견하였다. 📌 forwardRef를 사용해야 하는 이유 ? 함수형 컴포넌트는 인스턴스가 없기 때문에 ref 속성을 사용할 수 없다. 따라서, 함수형 컴포넌트를 forwardRef로 감싸주게 되면 ref를 사용할 수 있다. (+ 클래스로 선언된 컴포넌트들은 인스턴스를 가지기 때.. 2023. 2. 5. 이전 1 다음 728x90
