React 생명주기

Sooyoung·2022년 3월 6일
0

React

목록 보기
2/2

주제

React의 기본 개념을 알았으니 상세하게 알아볼 필요가 있다. 생명주기, hooks, 성능최적화등에 대해 알아보자

생명주기(life cycle)

컴포넌트가 실행, 업데이트, 제거등 웹에서 화면에 생성부터 사라질때까지를 생명주기 또는 라이프사이클이라고 표현한다. 이 때 각각의 생명주기일 때 특정한 이벤트를 호출한다.

Mount

컴포넌트가 처음 실행될 때 mount라고 표현한다. 시작되면 context, defaultProps, state를 저장하고 componentWillMount메소드를 호출한다. render로 컴포넌트를 DOM에 부착한 후 mount가 완료되고 componentDidMount가 호출된다.

주의할 점은, componentWillMount에서는 mount가 되기 전이기 때문에 props나 state를 바꾸면 안되고 DOM에 접근할 수도 없다. componentDidMount는 mount 이후이기 때문에 DOM에 접근 가능하다.

Props Update

props가 업데이트 될 때의 과정은 업데이트 되기 전 감지하고, componentWillReceiveProps메소드가 호출된다. 그 후 shouldComponentUpdate, componentWillUpdate가 호출 되고 업데이트가 완료되면 componentDidUpdate가 된다.

State update

setState 호출을 통해 state가 업데이트될 때의 과정이다. props update와 과정이 같지만 componentWillReceiceProps 메소드만 호출되지 않는다

Unmount

컴포넌트가 제거될 때 unmount라 한다. 더이상 컴포넌트를 사용하지 않을 때 componentWillUnmount 메소드가 발생한다. 주로 연결 해 두었던 이벤트 리스너를 제거하는등의 정리 활동을 한다.

useEffect

리액트가 DOM을 업데이트한 뒤 추가로 코드를 실행해야 하는 경우가 있다. hook에서 class 컴포넌트의 라이프사이클을 대체할 있는 것이 useEffect이다.

class 컴포넌트에서 class가 마운트 되려할 때 componentWillMount, 마운트가 되고 나서 componentDidMount, 마운트가 업데이트 될때마다 componentDidUpadte, 마운트가 끝날때 componentWillUnmount를 useEffect를 이용해서 대체할 수 있다.

useEffect(() => {
  console.log('componentDidMount');
  return console.log('componentWillUnmount');
}, [state])

위와같은 코드로 사용할 수 있으며 첫 렌더링 될때 console.log('componentDidMount') 실행되고 state가 바뀔때마다 console.log('componentDidMount') 호출됩니다. 마운트가 끝날때는 console.log('componentWillUnmount')이 표현됩니다.

0개의 댓글