[ React ] [Chapter 6] LifeCycle API 란?

LifeCycle API 란 무엇인가

 

리액트에서 컴포넌트를 만들 때 가장가장 중요한 이 LifeCycle API를 배워볼거다

LifeCycle API 는?
단어만 보면 생명주기 라는걸 알 수 있다.
컴포넌트가 우리 브라우져에서 나타날 때, 업데이트 될 때, 사라질 때 이러한 중간 과정에서 우리가 어떤어떤 작업을 하고 싶다 그럴 때 사용하는 것이 LifeCycle API이다

LifeCycle API는 종류가 엄청 많다

보면 엄청 많죠?
저 하나하나가 다 함수입니다.

꼭 다 외울려 하지말고 아 이런게 있구 하고 넘어가고 나중에 필요할 때 찾아보면 됩니다.
당연 다 외우면 좋기야 하죠

일단 설명을 하자면
Mounting 은 컴포넌트가 우리 브라우져상에 나타난다는 것
->1. constructor : 생성자 함수인데 우리가 만든 컴포넌트가 처음 브라우져 상에 나타날 때 가장 먼저 실행 되는 함수이다 그래서 여기에서는 주로 컴포넌트가 가지고 있을 state를 주로 초기 설정 할때 사용 된다. 또는 컴포넌트가 만들어지는 과정에서 미리 해야하는 작업이 있을경우 사용된다.
->2. getDerivedStateFromProps : 만약에 props로 받은 값을 state에 동기화 시키고 싶다 할 때 주로 사용 된다.  Mounting일때도 실행 되지만 props가 바뀌면 updating 가 실행 되면서 이 함수도 실행이 된다.
->3. render : 랜더는 이제 익숙 하죠? 어떠한 DOM을 만들지, 내부에 있는 태그들은 어떠한 값을 전달 해줄지 정의하는곳이다.
->4. componentDidMount : 주로 외부 라이브러리(ex:차트같은거외부) 같은거 쓸 때 특정 DOM에다가 뭘 한다거나, 혹은 네트워크 요청, API, ajax 같은 요청을 할 때 주로 여기서 처리한다. 또는 컴포넌트가 나타나고 몇초 뒤에 뭘 하고 싶다 거나 스크롤 이벤트를 발생 시키고 싶다 같은 경우에도 이곳에 쓰인다.

Updating 은 컴포넌트의 props나 state가 바뀔 때
->1. getDerivedStateFromProps : 이것 Mounting 에 설명한것 참조
->2. shouldComponentUpdate : 중요한 함수인데 컴포넌트 업데이트 되는 성능을 최적하 하고 싶을때 사용된다. 일단 컴포넌트는 부모 컴포넌트가 리랜더링이 된다면 자식 컴포넌트들도 리랜더링이 된다. 근데 이게 불필요할 때 가 있다.
즉 가상 DOM에 조차 어떠한 컴포넌트를 리랜더링 안되어야 하는 경우가 있을때 사용 된다.
New props가 발생하거나 setState가 발생해서 리랜더링이 되어야 하는데 여기 함수에 어떠한 로직에 의해 true가 발생하면 가상 DOM에 랜더링 하고 가상 DOM은 실제 DOM과 비교해 바뀐 DOM을 업데이트 친다 그러나 false가 발생하면 가상 DOM에 조차 안그려지고 끝난다.
->3. render : 이건 Mounting참조
->4. getSnapshowBeforeUpdate : 실제 랜더링 한 다음에 결과물이 브라우져에 반영되기 직전에 이 함수가 호출된다.
->5. componentDidUpdate : forceUpdate() 작업을 마치고 컴포넌트가 업데이트되엇을 때 호출 되는  함수

Unmounting 은 컴포넌트가 우리 브라우져 상에서 사라질 때
->1. componentWillUnmount : componentDidMount 특정 이벤트를 리스닝 할수있었죠 이 함수에서는 그걸 없애주는 작업할 때 사용 된다.

 

관련 글

저의 글을 읽어 주셔서 감사합니다. 오늘도 즐거운 하루 보내세요.

저의 글이 조금이나마 도움이 되셨다면 로그인이 필요 없는 공감♥ 한번 꾸욱 눌러주세요 하하~