함수형 라이프 싸이클 이해하기

 

function App() {
  const [counter2,setcounter2]=useState(0)
  const[value, setValue] =useState(0)
  let counter =0;
  let increase = ()=>{
    counter = counter + 1
    setcounter2(counter2 + 1)
    setValue(value+2)
    console.log("counter는",counter , "counter2는 ",counter2)
  }
  useEffect(()=>{
    console.log("함수 라이프 싸이클")
  },[])
  useEffect(()=>{
    console.log("함수 라이프 싸이클 두번째",counter2,value)
  },[counter2,value])
  return (
    <div >
      {console.log("render")}
      <div>{counter}</div>
      <div>state:{counter2}</div>
     <button onClick={increase}>클릭!</button>
    </div>
  );
}

함수형 라이크 사이클의 구조와 코드를 함께 보고 비교해볼거다.

 

요약 아닌 요약 

1. useState가 있다면 리랜더링이 되므로 변수의 값은 변하지 않는다.

2. 콘솔에 render 와 useEffect를 사용했을때 우선순위를 확인해보쟈

rander가 먼저 실행이 되는걸 알 수 있다.

즉, 컴포넌트를 그려준 다음 useEffect가 사용되는걸 알 수 있다.

 

useEffect 안에 함수라이프 싸이클을 써주었는데 

이걸 표그림을  봣을때  componentDid-Mount 인걸 확인할 수 있다.

render후 생성이 될때 콜백함수 안에 useEffect 내용이 실행이 된다.

 

3. 그럼 useEffect 안에 대괄호 [ ] 배열에는 어떻게 작동할까?

render 다음 함수라이프 싸이클 두번째가 작동이 되는걸 확인할 수 있는데

여기서 봐야할 부분은 1 이다.

코드를 보면 counter2을 대괄호에 넣었는데 원래같으면  사실

비동기작용을 하여 한박자 늦게 실행이 되지만

useEffet 안에 [counter2 ]을 넣게 되면 바로바로 실행이 되는걸 알 수 있다.

그럼? 다시 그림표를 보면 여기는 어떤게 해당이 될까?

바로 componentDidUpdate  이다. 업데이트가 되면 바로 실행이 되는걸 알 수 있다.