React ) useEffect 총 정리

백돼지·2023년 3월 31일
0
post-thumbnail

useEffect란?

  • 리액트의 컴포넌트의 생명주기(Life cycle)라는 것이 존재하는데,
    생성(mount), 갱신(update), 삭제(unmount)으로 구분되어 있다.

  • useEffect는 이러한 생명주기에 따라 원하는 코드를 실행할 수 있게 만들어주는 훅이다.

1. useEffect를 써야하는 코드들

useEffect는 html이 모두 랜더링이 된 후에 실행된다.
즉, 사용자에게 먼저 시각적인 결과를 보여준 후에 useEffect가 실행되기 때문에
사용자관점에서는 로딩 속도가 빠른것 처럼 체감할 수 있다.

useEffect를 쓰면 좋은 코드들의 종류는 다음과 같다.

  • 타이머 함수
  • 서버에서 데이터를 가져오는 코드
  • 어려운 or 오래걸리는 연산

2. useEffect 문법

1. 컴포넌트가 재랜더링 될때마다(state,props가 업데이트 / 컴포넌트가 mount될때 등등)실행하고 싶을 때

useEffect(()=>{"이 코드는 재랜더링 될때마다 실행됩니다"})


2. 컴포넌트가 최초 1회 mount될 때만 실행하고 싶을 때

useEffect(()=>{"이 코드는 최초 1회만 실행됩니다"},[])
				//[]: 종속식 배열(dependency array)


3. useEffect안의 코드가 실행 되기 전 항상 실행하고 싶을 때

useEffect(()=>{ return ()=>{"이 코드는 unmount될때 실행됩니다"} })


4. 컴포넌트가 unmount될때만 실행하고 싶을  (mount될때는 반환함수가 실행되지 않는다.)

useEffect(()=>{ return ()=>{"이 코드는 unmount될때 실행됩니다"} },[])


5. 원하는 코드가 변경될 때만 실행하고 싶을 때

useEffect(()=>{"이 코드가 실행됩니다"},[원하는 코드])

3. 반환 함수(clean up fuction)

위의 예시에서 3, 4번을 보면 return ()=>{} 이 바로 clean up function이다.
이 clean up function는
컴포넌트가 mount될 때는 실행되지 않고,
컴포넌트가 unmount될 때는 실행된다.

또 clean up function은 3번처럼 useEffect안의 코드가 실행 되기 전에 항상 실행시킬 수 있기 때문에,

  • 기존코드를 치울 때
  • 기존의 타이머를 제거할 때
useEffect(()=>{ 
  let a = setTimeout(()=>{ alert("2초가 지났습니다") }, 2000)
  return ()=>{
    clearTimeout(a)
  }
}, [])

위 코드의 순서
1. 컴포넌트 마운트 -> effect 함수 실행.
2. 컴포넌트 언마운트 -> 반환함수 실행.

4. useEffect 선언 위치 ?

useEffect를 쓰다가 자꾸 적용이 안되길래,
알고보니 컴포넌트 내에서 변수와 state 선언 전 사용해서 그런 것 이였다.
자세한 이유는 챗GPT에게 물어보았다.

profile
용호의 코딩블로그 22.11 코딩공부 시작 23.2 부트캠프 입소

0개의 댓글