React Lifecycle & useEffect 2

useEffect 활용 예

2초 후에 사라지는 박스 만들기

기억상기❗❗❗
동적인 UI 만들 땐
1. UI 상태를 저장할 state 만들고
2. state에 따라서 UI가 어떻게 보일지 작성하기

function Detail(){
  // 데이터 만들기 (true로 상태저장)
  let [alert, setAlert] = useState(true)
  // 2초 뒤 alert 상태를 false로 변경
  useEffect(()=>{
    setTimeout(()=>{ setAlert(false) }, 2000)
  }, [])

  return (
  {
    // true 이면 아래 div, false이면 null
    // 2초 뒤에 null로 변하기 때문에 사라지는 박스를 완성했다.
    alert == true
    ? <div className="alert alert-warning">
        2초이내 구매시 할인
      </div>
    : null
  }
  )
}

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

useEffect()의 둘째 파라미터로 [ ] 를 넣을 수 있는데
거기에 변수나 state같은 것들을 넣을 수 있습니다.

그렇게 하면 [ ]에 있는 변수나 state 가 변할 때만(update)
useEffect 안의 코드를 실행해줍니다.

그래서 위의 코드는 count라는 변수가 변할 때만 useEffect 안의 코드가 실행된다.

(참고) [ ] 안에 state 여러개 넣을 수 있다.

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

아무것도 안넣으면 컴포넌트 mount시 (로드시) 1회 실행하고 더 이상 실행해주지 않는다.
이를 디펜던시 라고 한다.
리액트의 특성상 리랜더링 되는 경우가 매우 많으므로 최초 실행 이후 더이상 랜더링 하지 않는 방식은 성능개선, 버그방지, 최적화에 매우 바람직한 방법이다.

clean up function

말 그대로 코드를 청소해주는 개념인데

useEffect 동작하기 전에 특정코드를 실행하고 싶으면
return ()=>{} 를 안에 넣으면 된다.

useEffect(()=>{ 
  그 다음 실행됨 
  return ()=>{
    여기있는게 먼저실행됨
  }
}, [count])

예를 들면 위에 다뤘던 setTimeout 타이머인데
setTimeout() 쓸 때마다 브라우저 안에 타이머가 하나 생긴다.
그런데 useEffect 안에 썼기 때문에 컴포넌트가 mount 될 때 마다 실행된다.
그럼 코드를 잘못 작성할 시 타이머가 100개 1000개 생길 수도 있다.
나중에 이러한 버그를 방지하고 싶으면 useEffect에서 타이머를 만들기 전에
기존 타이머를 모두 제거하라고 코드를 작성하면 되는데
그럴 때 아래처럼 return ()=>{} 안에 작성해주면 된다.

쉽게 말해 초기화 개념이다.
sup1) 타이머제거, socket 연결요청제거, ajax요청 중단 등에 많이 쓰인다.
sup2) 컴포넌트 unmount(삭제) 시에도 clean up function 안에 있던게 1회 실행된다.

useEffect(()=>{ 
  // 2초 후 state 값이 false로 바뀌는 타이머
  let timer = setTimeout(()=>{ setAlert(false) }, 2000)
  // 위 타이머가 실행되기 전 위 timer를 종료시킴
  return ()=>{
    clearTimeout(timer)
  }
}, [])

useEffect 한 줄 정리

//1. 재렌더링마다 코드를 실행.
useEffect(()=>{ 실행할코드 })

// 2. 컴포넌트 mount시 (로드시) 1회만 실행.
useEffect(()=>{ 실행할코드 }, [])

// 3. useEffect 안의 코드 실행 전에 항상 먼저 실행. 
useEffect(()=>{ 
  return ()=>{
    실행할코드
  }
})

// 4. 컴포넌트 unmount시 1회 실행.
useEffect(()=>{ 
  return ()=>{
    실행할코드
  }
}, [])

// 5. state1이 변경될 때만 실행.
useEffect(()=>{ 
  실행할코드
}, [state1])