useRef란? 🧐

• useRef와 useImperativeHandle 훅은 ref라는 속성에 적용하는 값을 만드는 훅!!!
• 모든 React, R/N가 제공하는 컴포넌트에는 모두 reference의 앞 3글자를 딴
• ┗ ref 라는 속성을 가질 수 있다!!!

그런데 ref 속성이 있는 사용자 컴포넌트는 forwardRef 함수로 생성해야 한다는 조건이 존재...

그래서 ref 속성이 뭔데... 🥲

• React, R/N 에서 제공하는 코어 컴포넌트 중에서

• TextInput, ScrollView, FlatList 컴포넌트 처럼

• ┗ 메서드를 제공하는 것이 있음!!!

• TextInput : focus, blur 같은 메서드 제공

• ScrollView, FlatList : scrollToTop, scrollToEnd 같은 메서드를 제공

• 그런데 컴포넌트의 메서드를 호출하기 위해서는

• ┠ 컴포넌트의 리액트 요소를 얻을 수 있어야만

• ┗ 컴포넌트_객체.메서드() 형태로 호출이 가능!!!

짤막한 ref 속성 타입

interface RefObject<T> {
  readonly current: T | null;

• 위의 코드에서와 같이 RefObject<T> 에서의 current 속성 타입은
• ┠ T, null 임을 확인할 수 있다. → 고로 current : T | null
• ┗ 어떤 시점에서는 current는 null이 아닌 요소의 값이 설정되어 메서드 호출이 가능하다.

useRef Hook

• react 패키지는 useRef 훅을 제공한다!!!

const flatListRef = useRef<FlaList | null>(null);
<FlatList ref={flatListRef} />

• 위와 같이 코드를 작성하여 flatListRef 값을 얻게 되면
  ┗ 다음과 같은 코드 형태로 scrollToEnd 같은 메서드 호출이 가능해짐 😃

flatListRef.current?.scrollToEnd()

여기서 사용된 ?(물음표)의 이유는 옵션 체이닝 연산자이다.

옵션 체이닝 간략하게 알아보기 👀

• 앞에서 알아본 바에 의하면 RefObject의 값이
  ┠ RefObjcect<FlatList | null> 이므로
  ┗ current 의 값이 null 일수도 있기 때문이다!!!
  

null 인지 아닌지 모르겠다면 옵션 체이닝 연산자를 쓰게 되면 오류가 안난다 😙

실제로 사용해보기 🖥

• ScrollView와 FlatList는 onContentSizeChange 이벤트 속성을 제공함
  ┗ 이 속성은 이름대로 콘텐츠의 넓이나 높이가 변하면 설정된 콜백 함수를 호출!!!

onContentSizeChange?: (w: number, h: number) => void;

• FlatList에 아이템을 추가하면 추가된 아이템의 높이만큼 크기가 증가 하므로
  ┠ onContentSizeChange 이벤트가 발생하게 됨
  ┠ 이걸 응용하면 onContentSizeChange 콜백 함수에서
  ┗ scrollToEnd 메서드 호출 → 아이템 추가에 따른 자동 스크롤 기능 구현이 가능해짐! 🤗
  

const onContentSizeChange = useCallback(
  ()=> flatListRef.current?.scrollToEnd(),
  [flatListRef.current]) // null 에서 유요한 값으로 바뀔 수 있기 때문
);
<FlatList onContentSizeChange={onContentSizeChange}/>

결론

• 드디어 조금은 이제 ref를 쓸 줄 알겠는데 react 공식 문서에서는 ref를 쓰는걸 권장하지 않는다고 하니...
• 잘 고려해서 사용을 해야겠다!!!

참고 서적

[리액트 네이티브 앱프로그래밍]-(전예홍)

---