Hooks

hooks란 functional component에서도 state와 기타 다른 사이드 이펙트를 다루기 위해 탄생하였다.

functional component는 hook 탄생 이전에 state를 기질 수 없기에 주로 dumb component로만 활용되었다. hook의 등장으로 주목받기 시작하였다.

hook을 왜 만들었을까?

첫째, 컴포넌트간 상태 관련 로직 재사용하기 어렵다는 점이었다.
둘째, 컴포넌트가 커질수록 복잡해지는 로직때문이다. componentDidmout에서 너무 많은 일을 하게 된다.
셋째, class의 this 키워드에서 오는 좋지 못한 경험이다.

hook의 사용 규칙은 무엇일까?

먼저, 모든 hook을 사용할때 최상단에서 호출 하여야만 한다.

class 컴포넌트의 동작은,
component 생성시 instance를 생성하고
component 최초 랜더시 Class 내부 render method 호출을하고
component 업데이트시 class 내부 render method 호출을 한다.

functional 컴포넌트의 동작은,
component 생성시 function을 호출하고,
component 최초 랜더시 function을 호출하고,
component 업데이트시 function을 호출한다.
즉, 랜더링 = 함수호출

다음으로는, React 함수에서만 hook을 사용해야한다.

react-native에서 자주 사용하는 Hook

1. useWindowDimensions
   화면의 width와 height등을 계산할때 사용

export const ComponentA = (props) => {
	const {width, height} = useWindowDimensions();
    {...etx code}
}

2. useBackHandler
   이 hook은 안드로이드에서 하드웨어 Back버튼을 누를때 처리하는 Hook
   이 hook을 사용할 때, boolean값을 무조건 return해줘야 한다.
   true를 주면 이벤트를 핸들링 하고, 다음 컴포넌트로 넘기지 않는다는 뜻이고,
   return false일 경우 컴포넌트에서 핸들링하지 않고, 다른컴포넌트로 제어권을 넘긴다는 의미이다.
   주로, 모달을 닫거나 bottom-sheet를 닫는다거나 할 때 사용한다.
   이 hook 경우 react-native 기본 패키지에 있지않아 추가로
   npm install @react-native-community/hooks를 설치해주어야 한다.

export const ComponentA = (props) => {
  useBackHandler(()=>{
    return true
  });
  {...etc code}
}

3. useAppState
   이 hook은 현재 앱의 상태가 어떤지에 대해 return해준다.
   앱이 현재 foreground에 있는지, background에 있는지에 대한 상태를 알려준다.
   foreground인 경우 active, background인 경우 background라는 값을 리턴해준다.
   이 hook도 react-native 기본 패키지에 있지않아 추가로
   npm install @react-native-community/hooks를 설치해주어야 한다.

export const ComponentA = (props) => {
  const currentAppState = useAppState(); // active, background, inactive(only ios)
  {...etc code}
}

4. useNavigation, useRouter
   react-navigation에서 자주 사용하는 hook
   이것은 navigation의 prop과 routes의 props에 접근할 수 있는 것들이다.

export const ComponentA = (props) => {
  const navigation = useNavigation();
  const routes = useRoute();
  {...etc code}
}

5. useIsFocused, useFocusEffect
   react-navigation에서 자주 사용하는 hook
   이 hook은 바텀탭네비게이션에서 많이사용한다. 탭이나 화면의 focus가 바뀐지에 대해 알 수 있다.
   useIsFocused는 boolean값을 호출해준다. useFocusEffect는 useEffect처럼 변경이되었을 때 callback을 처리해준다.

export const ComponentA = (props) => {
  const isFocused = useIsFocused();
  useFocusEffect(useCallback(()=>{
    // focus가 되었을때의 처리
  },[userId]));
  {...etc code}
}

6. useScrollToTop
   react-navigation에서 자주 사용하는 hook
   ScollView를 최상단으로 올릴때 사용한다.

export const ComponentA = (props) => {
  const scrollViewRef = useRef();
  useScrollToTop(scrollViewRef);
  {...etc code}
}

7. useMount
   react-use라는 npm package에 있는 hook
   component가 mount된 시점에 callback 호출
   컴포넌트가 mount되는 시점은 useEffect를 통해서 알 수도 있지만, 유지보수를 하다보면 어떤의미의 useEffect인지 모르는상황이 자주 나올 수 있고, 잘동작하는 코드를 지우면서 버그를 발생시킬 수 있기에, 이를 대비해 사용한다.

export const ComponentA = (props) => {
  useMount(() => {
    // on mount 처리
  });
}

8. usePrevious : state의 이전 값을 알아내고자 할때 사용

export const ComponentA = (props) => {
  const [count, setCount] = useState(0);
  const prevCount = usePrevios(count);
  {...etc code}
}