functional-component lifecycle(생명주기)

클래스형 컴포넌트에는 componentDidMout와 같은 생명주기 메서드들이 있습니다. 이와 같이 함수형 컴포넌트에서의 생명주기관련 훅은 useEffect 입니다.

componentDidMount

의존성 배열 [] 에 아무것도 넣지 않으면 Mount시에만 렌더해주고 끝나게 됩니다.(1번만 실행)

useEffect(()=>{
		console.log("마운트 됨!!")
	},[])

componentDidUpdate와 비슷

의존성 배열이 없으면 아무거나 하나라도 바뀌게 되면 무조건 다시 실행됩니다

의존성 배열안에 특정 값을 넣으면 그 값이 바뀔때만 다시 실행됩니다

// 의존성 배열 없을 때
useEffect(()=>{
		console.log("수정하고 다시 그려짐!!")
	})

// someState가 수정될때만 리렌더 해주기
useEffect(()=>{
		console.log("수정하고 다시 그려짐!!")
	},[someState])

componentWillUnmount

return의 값은 첫 mount시 실행되지 않고, 다른 페이지 이동하기 전 마지막에 실행 됨

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

		//
		return(()=>{
			console.log("여기서 나갈래요!!")
		})

	}, [])

• useEffect는 언제나 변수 만들어지고 return까지 다 그려지고 렌더링이 완료된 후에 실행, 따라서 localStorage등을 안에서 선언하면 Next.js의 프리렌더링으로 인한 오류를 방지할 수 있습니다.

useEffect(() => {
    console.log("변경되고 나서 실행")
  })
  console.log("누가 먼저 실행될까")

• 위와 같은 경우는 아래쪽에 있는 console.log가 먼저 실행이 된 후 useEffect가 실행이 됩니다.

• 따라서 setState를 useEffect안에 넣는 경우 렌더링 > useEffect > setState(다시 렌더링) > useEffect 이 되서 추가렌더링 1회가 더 일어나거나 무한 렌더링이 걸릴수 있기 때문에 최대한 지양해주는게 좋습니다.