컴포넌트의 Lifecycle

마운트(mount) - 처음 컴포넌트가 나타났을 때
업데이트(update) - 재렌더링
언마운트(unmount)
-> ex. detail페이지에서 home페이지로 이동시 detail 컴포넌트가 제거됨.

컴포넌트의 인생을 배우는 이유는 컴포넌트 인생 중간중간에 간섭할 수 있기 때문입니다.
간섭이 뭐냐면 그냥 코드실행인데
컴포넌트가 장착이 될 때 특정 코드를 실행할 수도 있고
컴포넌트가 업데이트될 때 특정 코드를 실행할 수도 있다는 겁니다.
그럼 재밌는 기능들 개발가능 🤡

예전 리액트에서 lifecycle hook

class Detail2 extends React.Component {
  componentDidMount(){
    //Detail2 컴포넌트가 로드되고나서 실행할 코드
  }
  componentDidUpdate(){
    //Detail2 컴포넌트가 업데이트 되고나서 실행할 코드
  }
  componentWillUnmount(){
    //Detail2 컴포넌트가 삭제되기전에 실행할 코드
  }
}

useEffect 언제실행되냐면

두번째 인자가 없을때는 컴포넌트 로드/ 업데이트 될때 실행

import {useState, useEffect} from 'react';

function Detail(){

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

  let [count, setCount] = useState(0)
  
  return (
    <button onClick={()=>{ setCount(count+1) }}>버튼</button>
  )
}

useEffect

useEffect 안에 적은 코드는 html 렌더링 이후에 동작합니다.

그래서 useEffect안에 적는 코드들은

• 어려운 연산
• 서버에서 데이터가져오는 작업
• 타이머 장착

useEffect의 형태

// mount시, 변수들의 변화가 일어날 때마다 실행
useEffect(()=>{
	console.log('hello world');
}, [변수1, 변수2...])


// 컴포넌트 mount시 1회만 처음에만 실행
useEffect(()=>{
	console.log('hello world');
}, [])

// 컴포넌트가 업데이트 될 때마다(재렌더링될때마다)매번 실행
useEffect(()=>{
	console.log('hello world');
})

cleanup function

return안에 있는 코드는 cleanup Function
useEffect 동작 전에 실행된다.
하지만 컴포넌트가 mount 시 실행안됨
unmount 시 실행됨 ex. 다른페이지로 넘어가서 다른컴포넌트보여줄때

useEffect(()=>{
	console.log('hello world');

	return()=>{
    	코드~~~~~~ 
    }
}, [])

특강

function App() {
  const [num, setNum] = React.useState(0);
  const [num2, setNum2] = React.useState(0);
  // setState를 이용해서 값을 바꾸면 화면이 새로그려짐!!



  // 매 렌더링때 어떤 효과를 실행하고싶으면
  // 아예 아무것도 적지 않는다. 배열도 적지마 그냥 함수만 넣어.
  React.useEffect(()=>{
    // 여기는 마운트, 업데이트때 일어남.
    return()=>{
      // 그럼 여기는..? 업데이트때랑 언마운트때 일어남.
    }
  })

  React.useEffect(()=>{
    //이렇게 적으면 마운트일때만(최초 컴포넌트가 만들어질때만)실행이된다
    // 최초에 한번만 실행하고 싶을때!
    console.log("마운트가되었습니다.");
    return ()=>{
      // 의존성 배열에 아무것도안적은 클린업 함수는 언마운트때! 한번!
      console.log("언마운트 되었습니다.")
    }
  },[])

  // num에 관련해서 뭔가 하고있음.
  React.useEffect(()=>{
    console.log(num,"num이 바뀌었습니다.")
    if(num%2==0){
      alert("num이 짝수입니다");
    }
    return ()=>console.log(num,"num에 의존하는 클린업!")
  },[num])
  // num2 에 관련해서 뭔가 하고있음
  React.useEffect(()=>{
    console.log("num2가 바뀌었습니다.")
  },[num2])

  // useEffect는 [의존성배열]안의 값이 바뀌면 효과를 일으켜준다!
  // 그래서 언제쓰는데? 내가 원하는 state가 변할때 마다 
  // 관련하여 어떤 행동을 하고싶을때 합니다.
  
  return(
    <div>
      {num} 뭐하라고있는거임?? {num2}
      <button onClick={
        ()=>{
          setNum(num+1)
        }}>더하기</button>
      <button onClick={()=>{
         setNum2(num2-1)
      }}>빼기</button>
    </div>
  )
}