React LifeCycle

React lifeCycle

case1. 클래스의 경우

: constructor -> render -> ref -> componentDidMount -> 동작중 -> setState/props 바뀔때 -> shouldComponentUpdate(true) -> render -> componentDidUpdate ->
부모가 자식 Component를 없앴을 때 -> *componentWillUnmount -> 소멸

• *componentDidMount()
  : render() 함수 실행으로 jsx를 처음 react-dom에 attach하는 시점에 호출, rerendering할 때는 호출되지 않음
  비동기 요청을 많이 함
• *componentDidUpdate()
  : 리랜더링 이후 호출
• *componentWillUnmount()
  : 컴포넌트가 제거되기 직전에 호출되는 함수
  비동기 요청 정리를 많이 함

case2. React Hooks

: useEffect를 이용하여 처리

useEffect(()=> {	// componentDidMount, componentDidUpdate의 역할 
	setState1();
	setState2();
	return (	// componentWillUnmount 역할 수행
	);
}, [state1, state2])

-> state 변경을 감지하여 hooks가 함수 컴포넌트 자체를 재실행한다고 볼 수 있음

React hooks Tips

useMemo, useCallback 이용해서 캐싱이 가능

useMemo : state가 hooks에 의해서 컴포넌트 자체가 재실행 될 때 데이터를 재호출하는 것을 메모이제이션함

useMemo(param1, param2)
	: 값을 기억해서 제공함
	param1은 캐싱할 데이터, param2의 변경에 따라 memo한 데이터 reload

useCallback

useCallback(param1, param2)
	: 함수 자체를 기억해서 제공함
	param1은 캐싱할 함수, param2의 변경에 따라 memo한 함수 reload
	useCallback에 쓰이는 state는 항상 param2에 추가해야함 -> 그렇지 않을 경우 처음 캐싱한 state를 그대로 들고 있

React Hooks는 절대 조건문안에 들어가면 안됨 -> 실행 순서가 바뀌면 안됨