728x90
리액트 네이티브에서, 개발하고 있는 스크린의 데이터를 리로드 해야 할 때가 있다.
게시판을 예로 들어, 상세 페이지에서 글에 대한 댓글을 달고 난 뒤, 게시판의 리스트 페이지로 돌아오면, 댓글의 수가
증가되어 있어야하는데,
navigation goback 함수나, pop 함수를 이용하여 뒤로가기를 하면, 해당 댓글의 수가 증가되어 있지 않다.
이런 경우에, 페이지를 리프레쉬 시켜줘야하는데, 이 떄 사용할 수 있는 것이 바로 useEffect이다.
|
1
2
3
4
5
6
7
|
const [test,setTest] = useState(0);
useEffect(() => {
return () => {
selectList(); // 게시판 데이터 조회 메소드
}
}, [test]);
|
cs |
다음과 같이 useState를 사용해서, useEffect 두 번째 인자에 값을 넣어주면,
test라는 값이 변화할 때 마다, useEffect는 selectList() 함수 호출을 하게 된다.
하지만 setTest를 이용해서 값을 제어해 주는 구문을 작성해야해서, 생각보다 불편할 수 있다.
그럴 때, 사용할 수 있는 것이 useIsFocused이다.
useIsFocused는 A페이지에서 B 페이지로 전환됐을 때(포커스가 변경되었을 때)를 감지하여,
자동으로 useEffect 함수를 실행하게 된다.
|
1
2
3
4
5
6
7
|
import { useIsFocused } from '@react-navigation/native';
const isFocused = useIsFocused(); // isFoucesd Define
useEffect(() => { return () => {
selectTest();
}
}, [isFocused]);
|
cs |
먼저 useIsFocused를 상단에 import 시켜 준 후, 임포트 해준 useIsFocused를 변수로 지정해준다.
그리고 해당 변수를 useEffect 함수 두번 째 인자에 isFocused 변수를 넣어주면,
페이지 전환 시, 해당 useEffect가 실행되어, 리렌더링을 진행하게 된다 !
728x90
