[React] Lifecycle, useEffect

Lifecycle

 

컴포넌트는 

생성이 될 수 있고(mount)

재렌더링이 될 수 있고(update)

삭제 될 수 있다(unmount)

 

컴포넌트가 mount 될 때/update 될 때/ umount 될 때 특정 코드를 실행할 수 있다

갈고리를 달아서 실행할 코드를 걸어주는 느낌이다.

그래서 Lifecycle hook 이라고 함.

import {useState, useEffect} from 'react';

function Detail(){

  useEffect(()=>{
    //여기적은 코드는 컴포넌트 로드 & 업데이트 마다 실행됨
    console.log('안녕')
  });
  
  return (생략)
}

이런식으로 써주면 Detail 컴포넌트가 mount 되거나 update 될 때마다

콘솔에 안녕이 찍힌다.

 

 

useEffect 에 적은 코드는 html 가 랜더링 된 이후에 동작을 한다

그래서 엄청 오래걸리는 코드가 있다면 html 를 먼저 랜더링 하고 

useEffect 에 있는 코드를 실행하는 게 좋을 거다.

 

여기서 오래 걸리는 코드란 

반복 연산

서버에서 데이터를 가져오기

타이머 달기

 등이 있겠다.

---

setTimeout

 

js 에서 n 초 후에 코드를 실행하고 싶을 때 이 함수를 이용한다.

setTimeout( ()=>{  1초 후 실행할 코드 }, 1000);

이런식이다.

---

useEffect 실행 조건

 

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

count 라는 state 가 변경될 때에만 코드를 실행

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

아무것도 넣지 않고 [ ] 로 작성하면 mount 할때에만 한번 실행

---

clean up function

 

useEffect 를 동작하기 전에 실행하고 싶은 코드가 있다면

return 안에 넣어줌.

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

기존에 있던걸 삭제해주는 용도로 쓰면 좋음. 

기존에 있던 타이머를 제거해주거나

기존 데이터 연결 요청을 제거한다던가

 

컴포넌트가 unmount 될 때 clean up function 안에 있는 거 한번 실행됨.

---

정리

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

재렌더링마다 코드 실행

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

mount 시에 1번 실행

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

useEffect 안에 코드 실행전에

항상 실행됨

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

unmount 될 때 1번 실행

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

state1이 변경될 때만 실행

---

예시 코드

function Detail(props) {
  let [num, setNum] = useState("");
  let [Alert, setAlert] = useState(true);

  useEffect(() => {
    let a = setTimeout(() => {
      setAlert((Alert = false));
    }, 5000);

    if (isNaN(num) == true) {
      alert("숫자를 입력해주세요.");
    }

    return () => {
      //useEffect 동작 전에 실행됨

      clearTimeout(a); //타이머 제거
    };
  }, [num]); // [] 추가 하면 mount 시 1회 코드실행, state 넣었을 시 state가 변경될 때 마다 코드실행

  let { id } = useParams();
  let item = props.shoes.find(function (x) {
    return x.id == id; //array자료의 id 와 url에 입력한 번호가 같은 경우(조건식)
  });

  return (
    <div className="container">
      <input
        onChange={(e) => {
          setNum(e.target.value);
        }}
      ></input>

      {Alert === true ? (
        <div className="alert alert-warning">남은 할인 시간 : 5초</div>
      ) : null}

useEffect 로 타이머와 input 기능을 만들어봤다

일단 이 useEffect 는 mount 될 때 와 num 이 변경될 때에 실행이 된다.

( 여기에서는 [num] 을 입력해줬기 때문에 mount 시에 한번 실행됨)

 

타이머를 5초로 맞춰두고, 5초가 지나면 Alert state 의 값을 false 로 바꾸고,

num state 가 문자라면 alert 를 띄운다.