오늘의 React

1.1 UseEffect

- 컴포넌트의 Lifecycle(인생주기)가 존재한다.

1. 페이지 들어갔는데 보이는 순간을 페이지 장착(mounted)된다고 한다. 

2. 가끔 업데이트 된다(update) - state조작시

3. 필요없으면 제거된다.(unmounted) - 다른 컴포넌트로 이동시

그래서 위의 인생주기에 간섭할 수가 있다. - 수정, 삭제, 이동할 때 특별한 기능을 구현한다. 

간섭하기 위해서 useEffect()를 사용한다. Function 안에 사용하면서 mount, update시 코드 실행한다.

 

- 언제 쓰니?

1. 실행시점이 약간 다르다.(렌더링이 다 되고 나서 실행된다)

2. 그럼 반복하거나 어려운 작업들을 Html이 렌더링이 되고 나서 실행하니까 조금 더 효율적이다.

3. 시간 오래 걸리는 코드나 어려운 연산을 할때는 useEffect()를 사용하면 좋다.

4. 서버에서 데이터 가져오는 작업

 

1. 기본 예시

import { useEffect, useState } from "react";
import { useParams } from "react-router-dom";



function Detail(props) {
  let [alert, setAlert] = useState(true);
  
  // 2초 후에 setAlert 함수를 false로 변경한다. useEffect 기본형태
  useEffect(() => {
    setTimeout(() => {
      setAlert(false);
    }, 2000)
  })


  let [count, setCount] = useState(0);

  let {id} = useParams();

  let product = props.shoes.find(item => item.id === parseInt(id));


  return (
    <div className="container">
      <Box bg="green">
        { alert == true ? <div className="alert alert-warning">2초이내 구매시 할인</div> : null
        }
        { count }
        <button onClick={() => { setCount(count+1)}}>버튼</button>
      </Box>
    <div className="row">
      <div className="col-md-6">
        <h4 className="pt-5">{product.title}</h4>
        <p>{product.content}</p>
        <p>{product.price}</p>
        <button className="btn btn-danger">주문하기</button>
      </div>
    </div>
  </div>
  )
}


export default Detail;

 

2. useEffect에 dependency를 사용

- mount를 1회만 실행하고 싶으면 dependency를 사용 

- dependency가 있으면 effect 안에 있는 구문이 동작하지 않는다.

// mount시, count라는 state가 변할 때 실행된다.
useEffect(() => {
  setTimeout(() => { setAlert(false)}, 2000)
}, [count])

 

 

3. useEffect 안에 return문 작성 가능(useEffect 동작 전에 실행된다.)

- clean up function은 기존코드 치우는 거 작성한다.

- clean up function은 unmount시 실행된다.

 useEffect(() => {
    setTimeout(() => {
      setAlert(false);
      console.log(1);
    }, 2000)
    
    // clean-up function
    return ()=> {
      clearTimeout(a);
    }
      
 }, [])

 

- 최종 정리

// 1.재렌더링마다 코드실행 하고 싶으면
useEffect(()=> {})
// 2.mount시 1회 코드실행 하고 싶으면
useEffect(()=> {}, [])
// 3.unmount시 1회 코드실행하고 싶으면
// 4.useEffect 실행 전에 뭔가 실행하려면 언제나 return () => {};
useEffect(()=> {
  return () => {
    
  }
},)
// 5. 특성 state 변경시에만 실행하려면 [state명]
useEffect(()=> {}, [])