[React Native] useEffect

useContext

컴포넌트가 렌더링될 때마다 원하는 작업이 실행되도록 설정할 수 있는 기능

사용 방법

useEffect(() => {}, []);

useEffect(() => {첫 번째 파라미터}, [두 번째 파라미터]);

첫번째 파라미터 : 전달된 함수가 조건을 만족할 때마다 호출
두번째 파라미터 : 배열을 이용해 함수가 호출되는 조건을 설정

예제 1

컴포넌트가 화면에 마운트 되었을때 최초로 한번 실행
useEffect의 두 번째 파라미터에 빈 배열을 전달

useEffect(() => {
  console.log('Component Mount');
}, []);

예제 2

컴포넌트가 화면에서 언마운트 되었을때 최초로 한번 실행
useEffect의 실행조건을 빈 배열로

useEffect(() => {
  return () => console.log('Component Unmount');
}, []);

예제 3

특정 상태가 변경될 때만 호출
useEffect의 두 번째 파라미터에 해당 상태를 관리하는 변수를 배열로 전달

const [name, setName] = useState('');

useEffect(() => {
  console.log('When the name is changed');
}, [name]);

예제 4

리렌더링 될 때마다 호출(최초 마운트시에도 호출)
두 번째 파라미터에 어떤 값도 전달하지 않음

useEffect(() => {
  console.log('Re-rendering');
});

로그를 확인할 수 없어 사진이 없는점 양해 바랍니다