[React_Native/TS] useRef 찍먹

ww8007·2021년 8월 26일
0

ReactNative

목록 보기
3/8
post-thumbnail

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를 쓰는걸 권장하지 않는다고 하니...
  • 잘 고려해서 사용을 해야겠다!!!

참고 서적

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


profile
Frontend 개발자를 꿈꾸는 대학생 입니다.

0개의 댓글