React Native의 유용한 Hook Library

react native에서 유용하게 사용하는 hook library들을 정리해보려 한다.

Hook의 기초 내용은 전에 작성한 이 글에서 확인하면 된다.

react-native

• useWindowDimensions 화면의 사이즈를 얻을 때 사용
• useBackHandler
  • android에서 h/w back키를 눌렀을 때 처리하는 hook
  • boolean값을 반환해야함
  • 이 hook은 rn패키지에 있지않고, 커뮤니티에있어서 추가로설치가필요함
  • npm install @react-native-community/hooks
• useAppState
  • foreground,background 상태를 확인할 수 있음.
• useNavigation
  • navigation prop접근가능
• useRoute
  • route prop접근가능
• useIsFocused, useFocusEffect
  • focus됐는지 확인가능
  • focused는 불린 값 리턴, focusEffect는 변경됐을때 콜백을 처리
• useScrollToTop
  • scrollview를 최상단으로 올릴 때 사용

react-use

• useMount
  • component가 mount된 시점에 callback호출
• usePrevious
  • state의 이전값을 알아내고자 할 때 사용

최적화를 위한 Memorization

functional component로 만든 컴포넌트는 함수 호출을 하며 생긴 함수 내부의 변수,함수 등은 모두 호출될 때마다 새로 할당하게된다.

이미 만들어졌고, 재활용하는 값이라면 새로 할당할 필요가 없어서 memorization을 사용한다.

memorization : 수행했던 연산 결과들을 어딘가 저장한뒤 동일한 입력값 인 경우 재활용하는 것

• memorization을 도와주는 hook

  • useMemo
    • 첫번째 인자 : 기억할 값을 리턴해주는 함수
    • 두번째인자 : dependency array, 배열안의 값들이 변경되면 다시 갱신할 수 있도록 함

      export const ComponentA = (props) => {
        //props.a=1, props.b=2
        const variableA = useMemo(()=>{
            return props.a+props.b
        },[props.a,props.b])
      }
      

      props의 a와b값이 바뀌면 variableA값도 자동으로 바뀐다.

  • useCallback
    • 첫번째인자 : 기억할 함수를 리턴해주는 함수
    • 두번째인자 : dependency array
    • useMemo와 비슷