React LifeCycle

리액트에서 라이프사이클을 이해하는것이 중요한거같다. 컴포넌트가 생기기 직전, 생긴직후, 사라기전 등 여러가지 상황을 이해하기위해 공부해보자.

class형 컴포넌트의 LifeCycle

// 최초 컴포넌트 렌더링시
1. constructor
1. componentWillMount 이제 안쓰임 쓰지마세요
2. render
3. componentDidMount

// 업데이트시마다
4. shouldcomponentUpdate (오직 성능최적화를 위해서만 사용. true, false를 반환 / true 반환시 다음단계로)
5. componentWillUpdate 이제 안쓰임 쓰지마세요
5. render
6. componentDidUpdate

*공식문서에 나와있는 Class LifeCycle
https://ko.reactjs.org/docs/react-component.html

function형 컴포넌트의 LifeCycle

기본적으로 useEffect는 의존배열에따라 lifeCycle이 결정된다.

useEffect(()=>{
	// 컴포넌트 렌더링시
},[])

useEffect(()=>{
	// 컴포넌트 렌더링시 + state 업데이트시
},[state])

useEffetct는 렌더링시 + 의존배열의상태가 바뀔시 경우로 묶여져 있기때문에 아래와같이 Ref값을 사용하여 렌더링이 된 이전, 이후를 분기 할 수 있다

const renderingRef = useRef(false);
useEffect(()=>{
	if(renderingRef.current === true){
    	// state 업데이트시
    }
    // 컴포넌트 렌더링시
    renderingRef.current = true;
},[state])

*공식문서에 나와있는 Hooks LifeCycle
https://ko.reactjs.org/docs/hooks-effect.html

*5가지 유용한 리액트 커스텀훅
https://zeromolecule.com/blog/5-utility-react-hooks-for-every-project/