- LifeCycle?
모든 리액트 컴포넌트에는 라이프 사이클(수명 주기)이 존재합니다.
라이프 사이클은 컴포넌트가 생성되고 소멸될 때까지
까지의 과정으로 어떤 작업을 처리해야 하거나 컴포넌트 업데이트 하기 전후로어떤 작업을 처리 해야 할 때도 있고 불필요한 업데이트를 방지해야 할때 LifeCycle method를 사용한다.
- 라이프 사이클 함수
총 9가지의 함수가 존재하며, will이 붙은 함수는 어떤 작업을 하기 전에 실행되고, did가 붙은 함수는 작업을 한 후에 실행됩니다.
- 컴포넌트의 라이프 사이클
-
MOUNT (페이지에 컴포넌트가 나타남)
React 컴포넌트의 인스턴스가 생성되고 DOM에 삽입되는 과정의 life cycle
- constructor
- componentWillMount
- render
- componentDidMount
-
UPDATE (리렌더링)
prop 또는 state의 변경으로 해당 컴포넌트가 re-render 되는 경우의 life cycle
- componentWillReceiveProps
- shouldComponentUpdate
- componentWillUpdate
- render
- componentDidUpdate
- shouldComponentUpdate
- componentWillUpdate
- render
- componentDidUpdate
- Unmounting
- UNMOUNT (페이지에서 컴포넌트가 사라짐)
- componentWillUnmount
Mount?
DOM이 생성되고 웹 브라우저상에 나타는 과정
Update?
컴포넌트를 업데이트 하는 경우로 아래와 같은 경우에 동작합니다.
Props가 바뀔 경우
state가 바뀔 경우
부모 컴포넌트가 리렌더링 할 경우
this.forceUpdate로 강제로 렌더링을 트리거 할 경우
Unmount?
마운트의 반대 과정으로 DOM에서 컴포넌트를 제거
관련 함수
1) render()
이 함수 안에서 this.props, this.state에 접근
리액트 요소를 반환, 아무것도 보여주지 않는다면 null이나 false를 반환하며 state를 변형하면 안되고 웹 브라우저에 접근해서도 안됨 => DOM 정보를 가져오거나 변화를 줄 떄에는 componentDidMount에서 처리해야 함
2) Constructor()
Constructor(props) {...}
컴포넌트를 처음 만들 때 사용
초기 state설정
3) getDerivedStateFormProps()
리액트 v16.3 이후에 새로 만든 라이프사이클 함수
props로 받아온 값을 state에 동기화 시키는 용도로 사용
컴포넌트를 마운트하거나 props를 변경할 때 호출
4) componentDidMount()
componentDidMount(){...}
컴포넌트를 만들고 첫 렌더링을 마친 후 실행
다른 자바스크립트 라이브러리나 프레임워크의 함수 호출, 이벤트 등록, setTimeout, setInterval, 네트워크 요청 등 비동기 작업 처리
5) shouldComponentUpdate()
shouldComponentUpdate(nextProps, nextState) {...}
props또는 state 변경 시 리렌더링을 시작할지 여부를 지정하는 함수
반드시 true & false 반환 해야함
현재 props, state 변경은 this키워드를 붙이고 새로 설정할 props, state는 nextProps, nextState로 접근
6) getSnapshotBeforeUpdate()
v16.3 이후 만든 메소드
render 메소드를 호출한 후 DOM에 변화를 반영하기 바로 직전에 호출하는 함수
componentDidUpdate에서 세번 째 파라미터인 snapshot 값으로 전달 받을 수 있는데 주로 업데이트 하기 직전의 값을 참고할일이 있을 때
7) componentDidUpdate()
componentDidUpdate(prevProps, prevState, snapshot) {...}
prevProps, prevState 사용하여 이전에 가졌던 데이터에 접근 getSnapshotBeforeUpdate에서 반환한 값이 있다면 여기서 snapshot 값을 전달 받을 수 있음
8) componentWillUnmount()
componentWillUnmount(){...}
DOM에서 제거할 때 실행
componentDidMount에서 등록한 이벤트, 타이머, 직접 생성한 DOM이 있다면 여기에서 제거 작업
