State-LifeCycle

• state값을 변경할때는 setState() 함수를 반드시 사용해야 한다.
• setState()함수는 비동기로 처리되며, 코드 이후 연결된 함수들의 실행이 완료된 후 화면 동기화 과정을 거친다.
• componentDidMount() : 함수가 JSX를 화면에 그린 후 호출되는 함수로 컴포넌트가 화면에 모두 표현된 이후에 해야하는 작업들을 한다.
• componentDidUpdate() : 컴포넌트가 실제 화면에 출력된 이후 호출되는 함수이다.
• componentWillUnmount() : 컴포넌트가 소멸되기 직전에 호출되는 함수로 컴포넌트에서 감시하고 있는 작업들을 해제할 때 필요한 함수이다.
• 함수형 컴포넌트에서는 useEffect를 사용한다.
• componentDidMount

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

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

• componentDidUpdate와 비슷하게 작동한다. 다른점은 mount되자마자 실행된다.

// 의존성 배열이 없기 때문에 뭐 하나라도 바뀌면 무조건 다시 실행됩니다.
useEffect(()=>{
		console.log("수정하고 다시 그려짐!!")
	})


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

• componentWillUnmount

useEffect(()=>{
		console.log("수정하고 다시 그려짐!!")
		//이부분이 끝나고 진행할 것들
		return(()=>{
			console.log("여기서 나갈래요!!")
		})
	})