Lifecycle

 

컴포넌트의 Lifecycle

페이지에 장착되기도 하고(mount)

가끔 업데이트도 되고(update)

필요없으면 제거되고 (unmount)

 

위의 내용을 알면 중간중간 간섭이 가능하다. (코드실행)

 

예전 리액트 컴포넌트 문법은 이렇게 코딩이 가능했다.

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

}

 

요즘 문법으로는 useEffect를 제공한다. (mount, updatet 코드를 실행해준다.)

  useEffect(()=>{
    console.log('안녕');
  })

useEffect는 html이 랜더링 된 후에 실행된다.

- 그러므로 트래픽이 발생하는 작업이 있을 때에 사용한다.

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

- 타이머 장착하는거

  //mount, update시 코드 실행해주는 useEffect
  //이곳에 적은 코드는 랜더링이 된 뒤에 작동한다.
  useEffect(()=>{
    for(var i = 0 ; i <10000; i++){
      console.log(1);
    }
  })

 

 

근데 왜 Effect인가? 무슨 뜻인가? (효과라는 뜻)

- side Effect : 함수의 핵심기능과 상관없는 부가기능 (곁다리 같은 기능들)

useEffect는 sideEffect를 보관하는 기능이다.

 

  useEffect(()=>{
    setTimeout(()=>{setAlert(false);},2000);
    console.log(1);
  },[count]); //count가 변경될 때 작동한다 //시작 될 때에도 작동한다. []로 표시하면 1번만 실행된다.

    useEffect(()=>{}) //재랜더링마다 코드 싱행하고 싶으면
    useEffect(()=>{},[]) //mount시 1회 코드실행 하고 싶으면
    useEffect(()=>{
      return ()=>{

      }
    },[]) // unmount시 1회 코드실행하고 싶으면