[study] 왜 hook을 만들었는가 ?(자주 사용하는 hook)

1. 컴포넌트 간 상태 관련 로직 재사용하기 어려움

매번 같은 상태 관리 로직을 copy&paste

공통화되지 않다 보니 컴포넌트마다 변경사항을 수정해야 하는 어려움

 

2. 컴포넌트가 커질수록 복잡해지는 로직

단일 책임 원칙에서 벗어남

 

3. 혼란을 주는 class

---

*hook 사용의 규칙

1. 모든 hook을 사용할 때 최상단에서 호출하여야만 함

함수호출 = 랜더링

 

2.react 함수에서만 hook을 사용해야 함

---

자주 사용하는 hook

---

React-native

-useWindowDimensions

-useBackHandler : 안드로이드에서 back키를 눌렀을 때 / return으로 boolean값을 꼭 해주어야 한다.

npm install @react-native-community/hooks

 

(예)

export const ComponentA = (props)=>{

                          useBackHandler(()=>{

                                                    return true

                                                    });

                          …

                          )

주로 모달을 닫거나, bottomSheet를 닫을 때 사용

 

-useAppState : 현재 App의 상태 || 현재 background에 있는지 등 확인할 수 있다

npm install @react-native-community/hooks

---

React-navigation

-useNavigation, useRoute

-useIsFocused, useFocusEffect : 화면의 포커싱이 바뀌어있는지 알 수 있다.

useIsFocused : boolean 값을 리턴

useFocusEffect : 포커스가 바뀌었을 때 함수를 callback 할 수 있다.

 

export const ComponentA = (props)=>{

                          const isFocused = useIsFocused();

                          useFocusEffect(useCallback(()=>{

                                                   //focus 되었을 때 이벤트 처리

                                                    …

                                                    }, []));

                          …

                          }

 

-useScrollToTop : ScrollView를 최상단으로 올릴 때 사용

 

React-use

-useMount : component 가 mount 된 시점에 callback 호출

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

export const ComponentA = (props)=>{

                          const [count, setCount]=useState(0);

                          const prevCount = usePrevious(count);

                          …

                          }