리액트의 라이프 사이클

기본적으로 라이프 사이클이란 탄생부터 죽음까지의 과정을 의미
리액트 : Mount(렌더링된 순간) -> Update(리렌더) -> Unmount(화면의 컴포넌트 제거)의 과정

< 라이프 사이클 제어 >

1. Mount : 서버에서 데이터를 불러옴
2. Update : 변경된 값이 무엇인지 콘솔 출력
3. Unmount : 컴포넌트가 사용하던 메모리 정리 및 해제

리액트의 "useEffect"를 이용해 쉽게 제어 가능

• useEffect
  라이프 사이클을 쉽게 제어하는 리액트의 내장 훅
  기본적으로 화살표 함수 선언 후 배열(의존성 배열 Deps)에 출력할 값을 넣는 식으로 작성

import { useEffect } from 'react'

function App() {

  const [count, setCount] = useState(0);

  useEffect(() => {console.log(count)}, [count, text]); // count가 변경될 때마다 콘솔 출력

  const onChangeText (e) {
	setText(e.target.value); // useEffect를 통해 컴포넌트가 Mount되는 순간 제어
  }
  
  const onClickBtn = (value) => {
    setCount(count + value);
  }

  return (
    <div className='APP'>
      <h1 className='title'>심플 카운터</h1>

	  <section>
	    <input value={text} onChnage={onChangeText} />
	  </section>

      <section>
        <Viewer count={count}></Viewer>
      </section>

      <section>
      <Controller onClickBtn = {onClickBtn}></Controller>
      </section>
      
    </div>
  )
}

export default App

-> console.log()를 단순히 상태변화 함수들에 포함시켜 호출하는 것과 useEffect()를 사용하는건 아예 다른 개념

상태변화 함수는 비동기적으로 작동하므로, 다음 라인에서 변경된 값을 바로바로 사용이 불가함
useEffect()는 바로 확인 가능

• useEffect (Update)
  두번째 인수인 Deps를 생략하면 컴포넌트에 Update(리렌더)가 생길 때마다 실행

useEffect(() => {
    console.log('업데이트');
  })

-> but, Mount의 경우(최초 렌더링)에도 출력되므로, 레퍼런스를 사용하여 이를 방지

import { useRef } from 'react'

const isMountRef = useRef(false);

useEffect(() => { // useEffect()는 마운트 시에도 한번 실행되므로, useRef를 이용한 꼼수
	if(!isMountRef.current){
	  isMountRef.current = true;
	  return; // console.log('업데이트'); 를 실행하지 않음
	}
	console.log('업데이트');
})

• useEffect (Mount)
  Deps를 추가하되, 배열을 빈 값으로 설정

useEffect(() => {
    console.log('마운트');
}, [])

Deps의 값이 변화할 일이 없으므로, 첫번째 렌더링 시에만 호출되도록 설정

• useEffect (Unmount)
  useEffect의 블록문 안에 추가적인 함수를 한번 더 return

// App.jsx
<section>
	<Viewer count={count}></Viewer>
	{count % 2 == 0 && <Even />}
</section>

// Even.jsx
import { useEffect } from "react"

export default function Even(){

  useEffect(() => {
    return () => {
      console.log('언마운트'); // 언마운트 or 콜백 함수 재호출 시 실
    }
  }, [])

  return(
    <div>짝수입니다.</div>
  )
}

-> Callback 함수가 새로운 함수를 반환하게 되면, 컴포넌트가 Unmount될 때 실행
Deps에 빈 배열을 설정하면 mount 시점에 한번만 호출되는데, 이를 이용해 조건 중 하나인
콜백 함수 재호출을 무효화 가능