reference인 만큼 '참조!'를 표시하는 역할
무슨 말이냐면 선언된 ref를 어디 컴포넌트의 ref 프로퍼티에 붙여두면 해당 컴포넌트(또는 DOM element)에 접근할 수 있다. 레퍼런스라서
알아둬야할 건 ref에는 일반적인 숫자도 저장할 수 있다.
하지만 그러지 않는 것은 ref의 실질적인 저장소인 프로퍼티.current가 레퍼런스를 전달하기 때문
그리고 아주 유용한 useState가 있다!
원래같으면 자식 컴포넌트에 값을 전달해서 재렌더링할 수 있도록 변화를 주는 거엿다면
얘는 "내가 직접 작업하겠다."
물론 단순히 값으로 해결 가능한 경우는 차라리 props를 넘겨주는 것이 편하고 좋아보임
하지만 컴포넌트 자체를 직접 컨트롤(대표적으로 포커싱)하거나 다른 DOM 라이브러리를 사용할 때와 같이 값을 선언하여 해결하기 어려운 경우
Ref를 이용하여 직접 그 컴포넌트(또는 element)에 접근할 수 있음
그래서 인스턴스가 없는 함수형 컴포넌트에는 ref를 전달해도 아무 반응이 일어나지 않음
하지만 useRef 사용해서 ref를 전달해주고 관리해주는 건 가능
(받아서 참조의 대상이 되는 것이 안됨)
우선 공식문서에서 제공하는 예시를 가져와봤다
class AutoFocusTextInput extends React.Component {
constructor(props) {
super(props);
this.textInput = React.createRef();
}
componentDidMount() {
this.textInput.current.focusTextInput();
// current 프로퍼티로 아래 CutstomTextInput 인스턴스를 참조할 수 있다
}
render() {
return (
<CustomTextInput ref={this.textInput} /> // 이때 얘는 클래스형 컴포넌트
);
}
}16.3v 이상에서는 React.createRef 라는 API를 이용하여 ref를 선언(그 이하의 경우 콜백ref)
- 콜백 ref는 createRef같은 함수 없이 참조하고 싶은 컴포넌트의 ref에다가 this.textInput에 해당 element 받는 콜백함수를 전달한다
// 아래 this.setRef를 전달 // 대신 textInput이라는 내가 설정한 ref접근할 때는 .current 없이 사용 this.setRef = (element) => {this.textInput = element;}
아무튼 과정을 정리하면 아래와 같다.
- 인스턴스의 변수인(그러니까 곧 만들어질 컴포넌트의 변수)
textInput에다가 ref를 선언하여 저장 - 이를 자식 컴포넌트인
CustomTextInput컴포넌트의 ref에 전달 → 너에게 접근하겠다/이 참조는 너를 보는 참조다, 놀랍게도this.textInput에는 자신이 전달받은 당사자(CustomTextInput)의 참조가 저장됨 - 라이프사이클 메소드를 통해 마운트된 후(첫 등장) 내가 지금 참조하는 애한테 포커스를 주겠다!! 라는 것
근데 이렇게 ref를 전달받는 컴포넌트를 보면 프로퍼티 처럼 생겨서 마치 컴포넌트 내부에서 ref로 값을 받아올 수 있을 것 같이 생겼는데 아님
key와 비슷하게 내부에서 받아서 props처럼 사용할 수 없다
→ 그렇다면 ref는 바로 아래에만 한정되는 것인가!!
아님
React.forwardRef(callback) 라는 메소드로 컴포넌트를 감싸 콜백함수의 반환값으로 컴포넌트를 넣을 경우 props처럼 자신의 부모 컴포넌트에게서 받은 ref를 자식 컴포넌트에게 전달할 수 있음
createRef()는 초깃값이라는게 없는걸까?
당근 있음 { current : null }
useRef(null)과 동일
createRef() vs useRef(init)
useRef() 를 간단히 설명하면 hooks 중 하나인데 이 역시 ref를 다룰 수 있도록 선언하는 역할을 한다.
하지만 추가적인 기능이 있는데….(바로 아래에서 계속)
https://stackoverflow.com/questions/54620698/whats-the-difference-between-useref-and-createref
createRef는 re-rendering될 때마다 항상 새로운 ref를 만들어낸다.
useRef의 경우는 가장 첫 렌더링 때 만들어 둔 ref를 계속 가지고 있다가 반환한다(상태값 유지하듯이) → 그래서 컴포넌트의 전 생명 주기에 대해 값을 유지할 수 있는 것
→ 아! 그렇다면 useRef는 특정 값보다는 어떤 컴포넌트에 대한 참조를 저장하는게 효율적일 것!!
만들어진 의도대로 사용하는 것이 좋을 것 같고
일반적인 상태값의 경우 더 직관적인 useState를 이용하는 것이 좋겠다
