[React.Hook] 2. useEffect

개인공부용

useEffect

: html 이 먼저 랜더링 된 이후에 코드를 실행토록 해주는 함수

 

또한, 특정 코드의 변경이 감지될 때만 실행되면 좋을 코드를 몽땅 넣어두는 저장소

 

<형식 및 설명1>

import useEffect from ‘react’;
  
 /**==(중략)==*/
 
useEffect(()=>{

     html 랜더링 이후에 실행한 코드
 
    return ()=>{  
         /** 클린업 함수 : { }내 코드가 실행 되기 전 우선 실행되는 함수로 보통
        { } 코드가 중첩되어 계속 쌓이는 것을 사전에 제거하여 방지할 때 활용 */
  }   
},[ ] ); 

    //ㄴ [ ] 내에 변수 등을 입력하면 [ ] 내 코드가 실행될 때 { } 내 코드가 실행되도록 함.
    
    
  /**  ==(중략)== */

 

<형식및 설명2 :  요약 정리>

1. 재렌더링마다 코드 실행

// 이 경우 useEffect 바깥에 선언된 코드와 차이가 없어 보이지만, 바깥에 선언된 코드를 html이 모두 랜더링 되기 전에 우선적으로 실행되지만, {   }에 감싸진 코드는 html이 모두 랜더링된 이후에 랜더링되는 것에 차이가 있음 useEffect(()=>{ 실행할코드 }) // 구분이 어려운 경우 실행하는 데 디따 오래 걸리는 반복문 등의 코드를 짜서 저 안에 넣어도 보고 빼보면서 비교하면 바로 이해 가능

2. 컴포넌트 mount 시(로드 시) 한 번만 실행

useEffect(()=>{ 실행할코드 }, [ ])

3. useEffect 안의 코드 실행 전에 우선적으로 항상 실행

useEffect(()=>{     return()=>{ } 이후 실행      return ()=>{            우선 실행     } })

4. 컴포넌트 unmount(삭제)시 한 번 실행

useEffect(()=>{       return ()=>{               실행할코드     } }, [])

5. state가 변경될 때만 실행

useEffect(()=>{ 실행할코드 }, [state])