[react] 라이프사이클(mount, update, unmount)

react

beaksul 2022. 12. 14. 16:58

컴포넌트 생성자 메서드

이 메서드에서 초기 state를 정할 수 있다.

props로 받아온 값은 state에 동기화시키는 메서드

컴포넌트가 마운트될 때, 업데이트될 때 호출된다.

컴포넌트를 렌터링하는 메서드

컴포넌트가 마운트된 뒤(컴포넌트의 첫 번째 렌더링이 끝난 뒤) 호출되는 메서드

이 메서드가 호출되는 시점에는 이미 화면에 컴포넌트가 만들어져 있다.

useEffact와 같은 동작을 수행한다.

useEffect(() => {
   ....
},[])

컴포넌트의 props나 state가 바뀌었을 때도 이 메서드가 호출된다.

컴포넌트의 props나 state가 바뀌었을때 리렌더링 할지 말지를 결정하는 메서드

이 메서드에서는 반드시 ture나 false가 반환돼야 한다. 성능 최적화를 위한 메서드

React.memo와 유사하다.

render에서 만들어진 결과가 브라우저에 실제로 반영되기 직전에 호출되는 메서드

이 메서드에 대한 사용례는 흔하지 않지만, 채팅 화면처럼 스크롤 위치를 따로 처리하는 작업이 필요한 UI 등을 생각해볼 수 있습니다. *공식문서

컴포넌트가 업데이트되고 난 뒤(리렌더링을 완료한 뒤) 호출되는 메서드

number가 바뀔 때마다 실행되는 useEffect

useEffect(() => {
   ....
},[number])

컴포넌트를 DOM에서 제거할 때 호출되는 메서드

DOM(componentDidMount에서)에 직접 등록했던 이벤트를 제거하고,

setTimeot이 있다면 clearTimeout을 통해 제거한다.

useEffect(()=>{
	... 
    return () => {
      clearTimeout(hi);
    }
}, [])

useEffect를 통해 설명해본다면 !

useEffect(() => {
  console.log('hidden changed');
  return () => {
    console.log('hidden이 바뀔 예정입니다.');
  };
}, [hidden]);

위 코드는 처음 렌더링 될 때 한 번 실행되고 - componentDidMount

hidden이 변경될 때마다 실행됩니다. - componentDidUpdate

return을 사용하면 componentWillUnmount의 역할도 해줄 수 있다.