728x90 hooks2 [React] forwardRef 사용법 (useRef, useImperativeHandle...) (함수형 컴포넌트에서) 부모 컴포넌트에서 자식 컴포넌트 안의 DOM element에 접근하고 싶다면? forwardRef를 사용해야 한다. 회사에서 프로젝트를 진행하던 중, 부모 컴포넌트에서 자식 컴포넌트 안의 함수를 사용해야 하는 경우가 생겼다. 자식 컴포넌트에서 부모 컴포넌트의 함수를 사용하려면 props를 사용하면 되었지만 그 반대의 경우는 경험해 본 적이 없어서 어떤 방식이 있는지 찾아보다 forwardRef라는 Hook을 발견하였다. 📌 forwardRef를 사용해야 하는 이유 ? 함수형 컴포넌트는 인스턴스가 없기 때문에 ref 속성을 사용할 수 없다. 따라서, 함수형 컴포넌트를 forwardRef로 감싸주게 되면 ref를 사용할 수 있다. (+ 클래스로 선언된 컴포넌트들은 인스턴스를 가지기 때.. 2023. 2. 5. [React] useEffect 총정리 React Hook인 useEffect에 대해서 정리해보겠습니다 📌 useEffect ? React Hooks 중 하나인 useEffect는 컴포넌트가 렌더링된 이후에 특정 작업을 실행할 수 있도록 하는 Hook이다. 왜 Effect라는 이름인가? 컴포넌트의 핵심 기능인 html 렌더링 이후에 동작하기 때문이다. 즉, 핵심 기능과 상관 없는 Side Effect(=함수의 핵심 기능과 상관 없는 부가기능)이라는 의미이다. useEffect( () => { 실행할 코드 }, [실행조건]); → 콜백 함수 안에 실행할 코드를 적고, 두 번째 파라미터로 배열 형태의 dependency를 넣을 수 있는데 dependency에는 변수나 state 같은 것들을 넣을 수 있다. 이는 실행조건이라고 보면 된다. 📌 Co.. 2023. 1. 8. 이전 1 다음 728x90
