useEffect함수
- 리액트 컴포넌트가 렌더링 될 때마다 특정 작업을 실행할 수 있도록함
- 클래스형 컴포넌트에서 사용할 수 있었던 생명주기 메소드를 함수형 컴포넌트에서도 사용할 수 있게 되었음
useEffect() 작성법
- useEffect(funtion, deps)
- fuction: 수행하고자 하는 작업
- deps: 검사하고자 하는 특정 값에 대한 배열 혹은 빈 배열
- *deps = dependency
Component가 mount되었을 때
- mount란 component가 가장 처음 렌더링 될 때다
- deps위치에 [ ] 표기 혹은 배열표시 생략
- 예시코드
import React, {useEffect} from 'react';
useEffect( () => { //컴포넌트 화면에 가장 처음 렌더링 될 때, 한 번만 실행하고 싶은 경우 빈 배열 삽입
console.log('마운트 시 실행')
}, []); //여기서 [] 배열을 생략하면 리렌더링 될 때마다 실행된다
Component가 update되었을 때
: 특정 rops, state가 바뀔 때
- update란 특정 props, state가 바뀔 때다
- Update뿐만 아니라 Mount때도 실행된다
- deps위치에 [내용] 표기
- 예시코드
useEffect(() => {
console.log(name);
console.log('업데이트 시 실행')
}, [name]); //업데이트 될 때 실행하고 싶으면 deps위치 배열([])에 검사할 값을 넣음
- 업데이트 시에만 쓰고 싶다면 아래와 같은 조정이 가능하다
const mounted = useRef(false);
useEffect(() => (
if(!mounted.current) { //조건문을 통해 마운트된 경우를 처리시킨다
mounted.current = true;
} else {
} //else 내에서 배열 값이 바뀌면 ajax 서버 통신 등의 원하는 코드 실행 가능
}, [바뀔 값]);
Component가 UnMount되었을 때, Update 되기 직전일 때
- unMount라고 하면 component가 소멸될 때이다
- cleanUp 함수를 반환한다
- cleanup함수: useEffect에 대한 뒷정리 함수, return 뒤에 호출됨
- unMount경우에만 cleanup함수 실행을 원할 경우
- 두 번째 parameter로 빈 배열 삽입
- 특정 값 update 직전에 cleanUp함수 실행을 원할 경우
- deps배열 안에 검사하고 싶은 값을 넣는다
- 예시코드
useEffect(() => {
console.log('effect');
console.log(name);
return () => {
console.log('celanup');
console.log(name);
};
}, []);
deps 값에 대하여
- useEffect 안에 사용하는 상태/props 존재할 시
- useEffect의 deps에 넣는 것이 규칙
- 넣지 않으면 useEffect 안 함수 실행시 최신상태, props를 가리키지 않음
- deps에 특정 값 삽입 시
- mount, UnMount, 지정 값 변화, 지정 값 변화 직전 모두 호출됨
- deps 특정 값 삽입을 하지 않을 시
- Component가 Re-Rendering될 때마다 useEffect함수가 호출됨