Lifecycle/ hook

Lifecycle/ hook

컴포넌트의 Lifecycle

페이지에 장착되기도 한다.(mount)

조작하면 업데이트(update)

필요 없으면 제거(unmount)

useEffect

이 라이프 주기를 안다면 중간 간섭이 가능함.

간섭 - 코드실행

간섭할 때

코드를 중간중간에 갈고리 달아서 함

컴포넌트 갈고리 다는법

이거는 클래스형 - 안씀

class Detail extends React.Component {
  componentDidMount(){
    //컴포넌트 mount시 여기 코드 실행
  }
  componentDidUpdate(){
    //컴포넌트 update시 여기 코드 실행
  }
  componentWillUnmount(){
    //컴포넌트 unmount시 여기 코드 실행
  }
}

함수형 이거를 주로 씀

function Detail(props) {
  
  useEffect(() => {
    // mount, update시 코드 실행함
  })

function Detail(props) {

  useEffect(() => {
    for (let i = 0; i < 10000; i++) {
      console.log(1);
    }

  })

  let [count, setCount] = useState(0)

<div className="container">
      {count}
      <button onClick={() => { setCount(count + 1) }}>버튼</button>

디버깅 위해 두번 작동함

이게 싫다. <React.StrictMode>이걸로 없앰

useEffect를 쓰는 이유

useEffect 안에 있는 코드는 html 렌더링 후에 동작함

효율적으로 동작함

useEffect 안에 적는 코드들은

어려운 연산

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

타이머 장착하는 것

sideEffect :

함수의 핵심 기능과 상관 없는 부가기능

[ ] → state나 변수 넣을 수 있음 - count가 변할 때마다 코드를 실행해줌

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

useEffect 동작 전에 실행되는 return() ⇒ {}

useEffect(() => {
    setTimeout(() => { setAlert(false) }, 2000)
    return () => {
      clearTimeout // 타이머 제거해주는 함수
    }
  }, [])

clean up function은

mount시 실행안됨

unmount시 실행됨

 

2. 빡통식 정리시간

useEffect(() => { }) 1. 재렌더링마다 코드실행하고싶으면
  useEffect(() => {}, []) 2. mount시 1회 코드실행하고싶으면
  useEffect(() => {
    return () => {
      3. unmount시 1회 코드 실행하고싶으면
    }
  })

useEffect(() => { }) 4. useEffect 실행전에 뭔가 실행시키려면 언제나 return() = {}
  useEffect(() => {}, [count]) 5. 특정 state 변경시에만 실행하려면 [state명]
  useEffect(() => {
    return () => {
     
    }
  })