[React] 부모에서 자식함수 부르기 ref 사용방법

이 글에서는 React의 ref가 무엇이고, ref를 사용하는 이유에 대해 얘기를 해 보며, 사용방법까지 다루려고 합니다.

 

ref가 무엇일까요?

 

ref는 reference 의 줄임말입니다. 참고, 참조 라는 의미로 주로 사용하고 있습니다.

ref는 일반객체 입니다. react 프로젝트에서 콘솔로 찍어본다면, current 프로퍼티 하나를 가진 객체가 나타납니다.

{current:null}

 

React는 이 객체를 통해 DOM에 직접적인 접근을 가능하게 해 줍니다.

 

export default class Test extends Component{
	
    ref = React.createRef();
    
    componentDidMount(){
    	console.log(this.ref.current.style.backgroundColor);
    }
    
    render(){
    	return(
        	<div ref={this.ref} style={{backgroundColor:'red', width:'200px', height:'200px' }}/>
  			)          
    }

}

위와 같이 createRef 함수를 통해 ref를 생성하면, ref객체를 Element의 ref props에 전달합니다.

그러면 함수가 반환한 객체의 current 프로퍼티로 해당 React Element의 DOM에 접근을 할 수 있게 됩니다.

 

ref의 활용처 : 비제어 컴포넌트

 

react 공식문서에는 ref 사용 사례를 다음과 같이 정리했습니다.

- 포커스, 텍스트 선택영역, 혹은 미디어의 재생을 관리할 때

- 애니메이션을 직접적으로 실행시킬 때

- 서드 파티 DOM 라이브러리를 React와 같이 사용할 때

이고, 선언으로 해결될 수 있는 문제에넌 사용을 지양한다는 문구가 함께 있습니다.

 

위의 경우들을 '비제어 컴포넌트를 제어할 때' 라고 할 수 있을 것 입니다.

 

비제어 컴포넌트는 React 시스템 안에서 제어하지 않고, 순수 JS를 이용해 제어하는 컴포넌트를 말합니다.

비제어 컴포넌트를 순수 JS로 제어하기 위해서, 브라우저 상의 DOM 노드를 담는 역할을 ref가 하는 것입니다.

 

왜 current로 접근해야 하는 것인가?

 

querySelector 처럼 그냥 DOM 요소를 반환해주면 좋을텐데,

createRef/useRef는 왜 객체를 반환하고 current 프로퍼티로 DOM요소를 전달해줄까요?

 

이는 React가 가상 돔을 기반으로 작동하는 라이브러리라는 사실을 생각해보면 이유가 명확해집니다.

 

React 공식문서는 이렇게 설명합니다.

- 컴포넌트가 마운트 될 때 React 는 current 프로퍼티에 DOM 엘리먼트를 대입하고, 컴포넌트의 마운트가 해제될 때 current 프로퍼티를 다시 null로 돌려놓습니다.

- ref를 수정하는 작업은 componentDidMount 또는 componentDidUpdate 생명주기 메서드가 호출되기 전에 이루어 집니다.

 

실제 DOM에 React 노드가 랜더될 때 까지 ref가 가리키는 DOM요소의 주소값은 확정된 것이 아닙니다.

 

즉, 우리가 ref에 접근할 수 있는 시점은 React 노드가 실제로 DOM에 반영되는 시점부터입니다.

 

가상 DOM이 변경될 때 실제 DOM의 요소도 변경되는 경우가 있기 때문에 DOM이 업데이트 되는 경우(componentDidUpdte)도 ref의 current 값이 변경되게 됩니다.

이처럼 유동적이기에 React는 객체를 반환해 current 프로퍼티의 값을 계속해서 수정합니다.

 

부모에서 자식함수 부르는 방법

 

 

부모

ref = React.createRef();

callRef = () =>{
	this.ref.current.getAlert();
}

render(){
	return{
    	<Child ref = {this.ref} />
    }
}

자식

getAlert = () =>{
	window.alert('자식 alert 부르기 !');
}

부모와 자식의 current로 부르려는 함수의 이름이 동일하면 안됩니다.

 

---

https://tecoble.techcourse.co.kr/post/2021-05-15-react-ref/

React ref 톺아보기

https://ko.reactjs.org/docs/refs-and-the-dom.html

Ref와 DOM – React