프론트 개발 블로그

Ref 란? React 에서 컴포넌트에 접근할 수 있는 특수한 어트리뷰트를 말합니다. React.createRef() 함수 / 콜백 함수 / 문자열(레거시 API) 로 생성할 수 있습니다. ref 어트리뷰트가 콜백 함수인 경우, 함수는 DOM 엘리먼트나 Class 인스턴스를 인자로 받습니다. Ref 사용 함수형 컴포넌트를 사용할 땐 : useRef() Hook API 클래스형 컴포넌트를 사용할 땐 : React.createRef() 메서드 React 에서 DOM 을 직접 선택 해야 할 떄, Ref 를 사용합니다. 특정 엘리먼트의 크기나 위치를 선택 해야 할 때 포커스 설정을 해야 할 때 스크롤 바의 위치나 설정 등 미디어의 재생을 관리 할 때 (VideoJS 등 HTML5 비디오 관련) 서드 파티 DOM..

Refs 전달하기 React.forwardRef 는 부모 컴포넌트에서 자식 컴포넌트로 ref 를 전달하여 부모가 자식 ref 를 참조 하는 기술입니다. - DOM 컴포넌트에 Refs 전달하기 - 컴포넌트 라이브러리 관리자를 위한 참고 사항 - 고차 컴포넌트(HOC)에서의 forwarding Refs - 개발자도구(DevTools)에 사용자 지정 이름 표시하는 방법 이 기법은 잘 사용되지 않지만, 아래의 두 시나리오에서는 특히 유용합니다. DOM 엘리먼트로 ref 전달하기 고차 컴포넌트(HOC) 로 ref 전달하기 DOM 컴포넌트에 Refs 전달하기 1 2 3 4 5 6 7 function FancyButton(props) { return( {props.children} ); } React 컴포넌트는 렌더..