forwardRef() 예제 분석

1. forwardRef() 메서드

ref 접근 순서

2. 무엇을 위한 과정인가?

위의 이미지는 HannaButton 컴포넌트 안에 있는(캡슐화 되어 있는) <button> 요소를 React.useEffect() 메서드 에서 조작하기 위한 과정이다.

3. 왜 useEffect()에서 조작 하는가?

DOM요소는 라이프 사이클 훅 ComponentDidMount 단계에서 DOM 요소 조작이 가능하기 때문이다.

4. 왜 Ref 객체로 요소에 접근하는가?

DOM API(명령형)을 사용해서 접근하는 방법도 있지만 현재 사용하고 있는 React는 선언형 프로그래밍이다. React에서 선언형으로 사용하기를 권장하기 때문이다. Ref는 선언형으로 요소에 접근하는 방법이다. 또한 선언형을 사용하면 상태를 선언하고 업데이트 하기 간편하기 때문이다.

1. React.useRef()객체는 { current } 속성을 가지고 있는 객체를 반환하고 반환된 객체를 buttonRef 변수에 할당한다. 그러면 buttonRef 변수는 buttonRef.current에 참조되어 있는 객체를 참조하게 된다.

2. 접근하고 싶은 <button> 요소를 감싸고 있는 HannaButton 컴포넌트에 { ref } 속성을 적용한다. 그러면 일단 1단계 진입을 성공했다.

3. 이제 <button> 요소에 접근하기 위해서 React.forwardRef() 메서드를 사용해서 HannaButton 요소에 { props }와 { ref } 속성을 전달한다. 그리고 React.forwardRef() 메서드가 전달받은 { ref } 속성을 <button> 요소에 전달을 해서 비로소 <button> 요소에 접근할 수 있게 된다.

4. 이제 React.useEffect() 내부에서 console.log(buttonRef)을 출력해 보면 bottonRef.current는 <button> 요소를 참조하고 있는 것을 확인 할 수 있다.