리액트 컴포너트에는 생명 주기가 있다. 이것을 라이프사이클(Life Cycle)이라고 표현한다.
라이프 사이클은 컴포넌트가 실행되거나,업데이트 또는 제거될때 특정한 이벤트들을 호출하는 것이다.
라이프 사이클은 클래스 컴포넌트에서만 사용할수 있으며, 함수 컴포넌트에서 사용하고 싶을 경우 useEffect(유저인펙트)를 이용하여 비슷하게 작업할 수 있다.
컴포넌트 생명주기는 마우팅(Mounting), 업데이트(update), 언마운팅(Unmounting)주요 단계
마운팅(Mounting)
컴포넌트의 생명주기에서 컨포넌트가 생성되는 단계이다. 최초로 DOM에 객체가 생성되며, 브라우저에 나타난다.
constructor(컨스트럭터)
컴포넌트의 초기 상태를 설정하거나,이벤트 헨들러를 바인딩(상속)하는데 주로 사용한다.
getDerivedStateFromProps
사용 예시 : static getDerivedStateFromProps(props, state)
props(프랍스)로 받아온 것을 state에 넣어주고 싶을 때 사용한다.
다른 메서드와는 다르게 앞에 static을 필요하고, 안에서 this를 조회 할 수 없다. 여기서 특정 객체를 반환하게 되면 해당 객체 안에 있는 내용들이 컴포넌트의 state로 설정되며, 반면 null을 반환하게 되면 아무 일도 발생하지 않음
컴포넌트가 처음 랜더링 되기 전에 호출되고 기 이후 리렌더링 되기 전에도 매번 실행된다
render(렌더)
컴포넌트의 필수 메서드로 컴포넌트가 어떻게 보여질지 결정한다. React는 메서드의 반환값을 사용하여 DOM을 업데이트 한다.
componentDidMount(컨포넌트디드마운트)
DOM에 삽입된 직후에 호출된다.(ex.setTimeout)
컴포넌트가 화면에 나타난 후 필한 데이터를 불러오거나, 외부 라이브러리를 초기화하는데 사용된다.
업데이트(update)
컴포넌트 props(프랍스), state(스테이트)변경으로 재렌더링 되었을때 발생되는 생명주기의 중요한 부분
클래스 컴포넌트는 업데이트를 효율적으로 처리하기 위한 여러 생명주기 메서드를 제공하여 개발자가 업데이트 과정을 제어하고 부작용을 수행하며 성능을 최적화할수 있게 한다.
getDerivedStateFromProps
초기 마운트와 이후 업데이트 모두에서 render(렌더) 메서드 바로 전에 호출된다.
컴포넌트가 props(프랍스)의 변경 결과로 내부 상태를 업데이트할수 있게 한다.
마운팅getDerivedStateFromProps과 같은 기능
shouldComponentUpdate
props(프랍스), state(스테이트)가 업데이트를 트리거 하지 않아야 한다면 false를 반환함으로써 불필요한 재렌더링을 피할수 있게 해준다.
render
해당 메서드는 다시 호출된다. this.props와 this.state를 검사 하고 업데이트된 JSX를 반환한다. 이메서드는 순수해야하며, 컴포넌트 상태를 수정하거나 부작용을 반환하거나 브라우저와 직접 상호작용해서는 안된다.
getSnapshotBeforeUpdate
가장 최근에 렌더링 된 출력이 DOM에 커밋되기 바로 전에 이 메서드가 호출된다. 업데이트로 인해 변경될 수 있는 DOM에서 정보를 캡처할 수 있게 해준다.
ex) 클릭 시 DOM업데이트가 되어도 스크롤 위치는 고정
componentDidUpdate
업데이트가 발생한 직후에 이 메서드가 호출된다. prop(프랍스)또는 state(스테이트)변경에 응답하여 DOM 업데이트나 데이터 가져오기와 같은 작업에 유용한다.
언마운팅(Unmounting)
컴포넌트가 화면에서 사라지는 것을 의미한다.
componentWillUnmount
컴포넌트가 화면에서 사라지기 직전에 호출된다. DOM에 직접 등록했었던 이벤트를 제거하고, setTimeout을 걸은것이 있다면 ClearTimeout을 통하여 제거를 한다.
참고 페이지1
https://laurent.tistory.com/entry/React-%EC%BB%B4%ED%8F%AC%EB%84%8C%ED%8A%B8%EC%9D%98-%EC%83%9D%EB%AA%85-%EC%A3%BC%EA%B8%B0Life-Cycle
참고 페이지2
https://shape-coding.tistory.com/entry/React-React-%EC%BB%B4%ED%8F%AC%EB%84%8C%ED%8A%B8%EC%9D%98-%EC%83%9D%EB%AA%85-%EC%A3%BC%EA%B8%B0-Life-Cycle