리액트로 쇼핑몰 사이트 만들기 #5 useEffect

 

컴포넌트의 Lifecylce

- mount : 페이지에 장착
- update : 업데이트
- numount : 필요없으면 제거

이 중간중간 특정 코드를 실행할 수 있다.

 

 재렌더링 될 때마다 실행  된다.

import { useEffect } from 'react';

function Detail(props) {

  useEffect(()=>{
    // mount, update 될 때 이 코드가 실행이 된다.
  })

 

쓰는 이유 : 빠른 느낌 부여

html 렌더링 마친 후 useEffect 안에 있는 코드가 동작한다.
예를 들어 만약 10,000번 동작하는 for문이 있어야한다면 useEffect 에 넣어주면 된다.
그러면 html 코드는 화면에 이미 보여질 것이고,
그 후에 시간이 오래 걸리는 for 문이 보이게 될 것이다.
따라서 사용자로 하여금 조금 더 빨라 보이는 효과가 있다.


사용처 : 어려운 연산, 서버에서 데이터를 가져오는 작업, 타이머 장착 등

 

---

 

z.B. <div> 태그가 2초 후에 사라지는 useEffect 만들기

 

let [alert, setAlert] = useState(true)

useEffect(()=>{
    setTimeout(()=>{ setAlert(false) }, 2000)
})

...

return (
    <div className="container">
        {
            alert == true 
            ? <div className="alert alert-warning">
                    2초 이내로 확인
                </div>
            : null
        }
        
        ...
)

 

 

만약 재렌더링 될 때마다 말고,  mount 때 1번 실행  시키고 싶은 코드가 있다면

 

useEffect(()=>{
    setTimeout(()=>{ setAlert(false) }, 2000)
}, [])

 

대괄호를 작성해준다.

대괄호 안에는 실행조건인 state명을 적어줄 수도 있다.

z.B. state의 상태 변화가 있으면, 해당 코드가 실행될 것이다.

 

---

 

[  clean up function  ]

 

기존 코드를 지우는 역할

 unmount 때만 1회 실행  된다.

 

useEffect(()=>{
    setTimeout(()=>{ setAlert(false) }, 2000)
    
    return ()=>{
      // useEffect 가 동작되기 전에 실행되는 코드
    }
})

 

예를 들어, 위에서처럼 타이머를 구현했을 때, 리액트 특성상 재렌더링 된다.

그러면 타이머가 여러개 생성될 수 있는데 이 때 저 return 안에 기존의 타이머를 제거하는 코드를 작성할 수 있다.

useEffect(()=>{
    let a = setTimeout(()=>{ setAlert(false) }, 2000)
    
    return ()=>{
      clearTimeout(a)
    }
})

 

그러면 꼭 필요한 한 개의 타이머만 장착할 수 있다.