리액트 컴포넌트 생명주기, useEffect 사용법

리액트 컴포넌트에는 생명주기(lifecycle)가 있어서 특정 시점에 나타났다가 사라지도록 할 수 있다.
이때 클래스형,함수형 컴포넌트가 각각 다르게 메소드를 제공해서 생명 주기를 나타낼 수 있다.

크게는 Mount, Update, Unmount 단계로 나눈다.

• 마운트(Mount): DOM이 생성되고 웹 브라우저에 나타나는 것
• 업데이트: props가 바뀌거나 state가 바뀔때, 부모 컴포넌트가 리렌더링 되는 경우 혹은 강제로 렌더링 트리거 할 때에 컴포넌트가 업데이트
• 언마운트: 컴포넌트를 DOM에서 제거하는 것

클래스형 컴포넌트의 생명주기

render : 렌더링 메소드 (UI를 화면에 그리는 메소드)
componentDidMount : 컴포넌트를 만들고 첫 렌더링을 마친 후 호출되는 메소드
componentDidUpdate : 컴포넌트 업데이트 작업이 끝난 후 호출되는 메소드, 리렌더링을 완료한 후에 실행됨
componentWillUnmount : 컴포넌트가 웹 브라우저상에서 사라지기 전에 호출(=나 이제 나갈거야!)

함수형 컴포넌트의 생명주기

함수형 컴포넌트의 경우 Hook 중에서 useEffect를 이용
이때 useEffect 첫번째 인자는 실행될 함수, 두번째 인자에는 의존성 배열을 넣는다.
각 생명주기마다 메소드가 있는게 아니라 useEffect를 써서 구현한다.

• componentDidMount 역할

//Mount할때만 실행하고 끝(1번만 실행)

useEffect(()=>{
		console.log("마운트 되었습니다.")
	},[])

의존성 배열에 아무것도 넣지 않으면 componentDidMount 역할을 해서 마운트 한번할때만 실행되고 더이상 실행되지 않는다.

• componentDidUpdate와 비슷(같지 않다)

// 의존성 배열이 없기 때문에 하나라도 뭔가 바뀌면 실행
useEffect(()=>{
		console.log("수정하고 다시 렌더링")
	})

// 의존성 배열안에 state를 넣으면 state가 변할 때만 리렌더링
useEffect(()=>{
		console.log("수정하고 다시 렌더링")
	},[state])

update의 경우 클래스형 컴포넌트 메소드와 헷갈렸던 점
함수형 컴포넌트는 의존성 배열을 넣어도 처음 마운트될때 수정되는 함수도 실행됨.
하지만 클래스형 컴포넌트는 componentDidUpdate 메소드를 실행할 때 상태값이 변경될 때 '만' 실행된다. 처음 마운트때는 실행되지 않는다.

• componentWillUnmount 역할

useEffect(()=>{
		console.log("수정하고 다시 그려짐!!")

		//이부분이 끝나고 진행할 것들
		return(()=>{
			console.log("여기서 나갈래요!!")
		})

	})