Lifecycle Methods (컴포넌트 생명주기)
리액트 컴포넌트에는 라이프 사이클이 존재하는데 컴포넌트의 수명은 페이지가 렌더링을 준비하는 때부터 페이지에서 사라질 때 끝난다.
컴포넌트를 렌더링할 때 어떤 작업을 처리하거나, 업데이트 전 후로 작업을 처리해야 할때, 라이프 사이클 메소드를 사용한다. 이러한 메소드는 class 컴포넌트에서 사용하는 메서드이다.
function 컴포넌트에서는 useEffect 를 사용해서 비슷하게 사용할 수 있다. 클래스 컴포넌트를 사용하지는 않지만, 배웠던 useEffect를 더 잘 이해하기 위해 간단히 정리해두어야 겠다고 생각했다.
첫 번째로 마운트가 있는데, DOM이 생성되고 웹 브라우저에 나타나는 것을 말한다. 마운트시 호출되는 순서는 constructor, getDerivedStateFromProps, render, componentDidMount 이다.1. Mount (마운트)
constructor는 클래스 생성자, 처음 한 번만 실행되며 state선언, props를 초기화할 때 사용한다.
getDerivedStateFromProps는 컴포넌트가 새로운 props를 받게 됐을 때 state를 변경한다.
componentDidMount는 컴포넌트가 웹 브라우저에 나타난 후 호출 화면이 모두 렌더링 된 후 실행되어야 하는 이벤트 처리, 초기화, 비동기 작업 처리 등 가장 많이 활용된다.
2. Update (업데이트)
두 번째로는 업데이트 이다. 컴포넌트 업데이트를 발생시키는 요인은 네 가지가 있는데,
첫 번째는 props의 변화이다. 부모 컴포넌트에서 넘겨주는 props의 값이 바뀔 때마다 렌더링이 일어난다.
다음으로는 state의 변화인데, 이 때 setState에 의해 업데이트 된다. 세 번째는 부모 컴포넌트의 리렌더링이다. 부모 컴포넌트가 리렌더링 된 후에 자식 컴포넌트가 리렌더링 된다. 마지막으로 this.forceUpdate로
강제로 렌더링 트리거할 때이다.
3. Unmount (언마운트)
언마운트는 마운트의 반대 과정으로 컴포넌트를 DOM에서 제거하는 것을 의미한다.
언마운트시 호출하는 메서드는 componentWillUnmount이다. 컴포넌트가 웹 브라우저상에서
사라지기 전에 호출한다.
Life Cycle diagram
출처 - http://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/
이 외에도 더 많지만 간단하게 알아보았다. 나중에 useEffect에 대해 더 알고나면 다시 한번 찾아봐야겠다.
