이제 react를 조금씩은 익혀가고 있습니다. 무엇인가 뿌듯한 것 같습니다
Lifecycle
React은 몇가지 특성을 가지고 있는데 그 중 하나는 데이터의 단방향성입니다.(마치 폭포수처럼 부모에서 자식으로 props를 넘겨준다)
React의 또 다른 특징이 바로 Lifecycle입니다.
Mounting
최초로 컴포넌트를 render를 해주는 과정을 mounting이라고 합니다.
기본적으로 Mounting 과정에서 DOM에 노드를 추가되게 됩니다.
mounting 과정에는 constructor(), render(), 그리고 componentDidMount()가 포함되어있습니다.
constructor() => 기본 local state를 세팅하기 위한 영역입니다.
render() => 컴포넌트의 JSX를 리턴해줍니다.
componentDidMount() => 처음 render를 해준 이후에 해당 데이터에 적용해주는 데이터를 담당합니다. 주로 첫 데이터를 불러오기 위하여 사용합니다.
Updating
새로운 props가 입력되거나 setstate()가 적용되거나 forceUpdate()가 발생하였을 때의 과정을 Updating이라고 합니다. Updating에는 새롭게 componentDidUpdate()가 추가가 되고 render()의 과정이 반복되게 됩니다.
따라서 Updating과정 동안에는 Mounting 했던 데이터를 Updating한 데이터로 rendering을 통해 새롭게 바꿔줍니다.
componentDidUpdate() => componentDidMount()와 마찬가지의 기능을 하고 있지만 업데이트가 일어난 직후에 발생하게 도와줍니다. 컴포넌트가 업데이트 되었을 때 DOM을 조작해야 된다면 작성해주는 것이 좋습니다.
Unmounting
해당 기능을 더 이상 사용하지 않을 때에 삭제를 해준다면 이 과정을 Unmounting이라고 합니다. componentwillUnmount() 는 unmount과정이 일어났을 때 해당 기능을 초기화 하거나 새로운 값으로 대체할 때에 사용하면 좋습니다.
reference:
https://ko.reactjs.org/docs/react-component.html
https://medium.com/@drewisatlas/react-lifecycle-methods-what-are-they-when-do-we-use-them-edccb5ec860a
