[TIL #5] React (Hooks) - useEffect 란?

JMinkyoung·2021년 7월 8일
0

TIL

목록 보기
5/42
post-thumbnail

클래스형 컴포넌트에서 제공되었던 componentDidMount, componentDidUpdate, componentWillUnmount 같은 생명주기를 관리하던 API를 함수형 컴포넌트에서 사용할 수 있도록 생겨난 API가 바로 useEffect 다.

useEffect() 사용법

useEffect(function, deps)
함수의 기본 형태는 다음과 같고 function은 우리가 잘 알고 있는, 실행하고자 하는 함수를 의미하고 deps 는 배열의 형태로 입력하며 검사하고자 하는 특정 값이나 빈 배열을 입력한다.

1. componentDidMount 처럼 사용하고 싶을 때

componentDidMount는 화면에 처음 나타날때만, 즉 첫 마운트에만 실행되도록 하는 것이고 useEffect를 이용하면 deps에 빈 배열을 넣어주면 된다.

// 첫 렌더링 시에만 실행
useEffect(()=> {
  // 실행하고자 하는 함수
  someFunction();
}, []); 
  

만약 렌더링 될때마다 실행되도록 하고 싶다면 아래와 같이 배열을 아예 생략해주면 된다.

// 렌더링 될때마다 실행
useEffect(()=> {
  // 실행하고자 하는 함수
  someFunction();
}); 
  

2. componentDidUpdate 처럼 사용하고 싶을 때

componentDidUpdate는 특정 값이 바뀔 때 마다 실행되도록 하는 것이며 useEffect를 이용하면 deps 배열안에 변화를 감지하고 싶은 특정 값을 넣어주면 된다.
하지만 이 방식은 특정 값이 바뀔 때 마다 실행되기도 하지만 첫 렌더링 시에도 실행된다.

// name이 바뀔 때 마다 실행
useEffect(()=> {
  // 실행하고자 하는 함수
  someFunction();
},[name]); 
  

3. componentWillUnmount 처럼 사용하고 싶을 때

componentWillUnmount는 컴포넌트가 사라졌을 때 실행되도록 하는 것이며 useEffect에선 컴포넌트가 사라질 때, 특정 값이 바뀌기 직전에 실행되도록 할 수 있다.

cleanup : return 뒤에 따라서 나오는 함수를 의미하고 useEffect에선 뒷정리 함수라 불린다.

만약 컴포넌트가 사라질 때에만 cleanup 함수를 사용하고 싶다면 deps를 빈 배열로 넣어주면 된다.

// 컴포넌트가 사라질 때에만 claenup 함수 실행
useEffect(()=> {
 	
  someFunction();
  
  return () => {
  	// 이 부분이 cleanup
     	console.log('This is cleanup');
  };
},[]); 
  

특정값이 업데이트 되기 직전에 cleanup 함수를 사용하고 싶다면 componenetDidUpdate때 처럼 deps 안에 감지하고 싶은 값을 넣어주면 된다.

// name이 업데이트 될 때 claenup 함수 실행
useEffect(()=> {
 	
  someFunction();
  
  return () => {
  	// 이 부분이 cleanup
     	console.log('This is cleanup');
  };
},[name]); 
  

useEffect 내에서 사용하는 State나 Props가 존재한다면, useEffect의 deps에 넣어주는 것이 규칙이다. 만약 넣어주지 않는 다면 useEffect 내의 함수가 실행될 때 최신 State, Props를 가리키지 않는다는 문제점이 생긴다! ⚠

참고자료

profile
Frontend Developer

0개의 댓글