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);
…
}
'Development > ReactNative' 카테고리의 다른 글
[study] RESTful 기반 API를 이용한 웹 서비스 개발 (1) | 2024.03.25 |
---|---|
[study] 최적화를 위한 Memorization (0) | 2024.02.15 |
[study] Props-drilling 이란? (0) | 2024.02.15 |
[study] Gradle 특정 버전 설치하기 (0) | 2024.02.15 |
[error] 안드로이드 스튜디오에서 빌드가 성공적으로 열리는데, 터미널에서 npm start를 실행하면 빌드 실패(buildFailed)가 발생 (0) | 2024.02.15 |