TIL(2020.12.17)

1. LifeCycle API(생명주기)

• 콤포넌트가 브라우저 상에서
  1) 나타날 때
  2) 업데이트 될 때
  3) 사라질 때
  사용됨.
• 각 생명주기 단계별로 종류가 다양하다.
• 외우지 말고 필요할 때 매뉴얼에서 찾아서 쓸 수 있으면 됨
• 각 단계별로 존재하는 함수를 호출해 사용하면 됨.

1-1. Mounting

• 컴포넌트가 브라우저 상으로 나타날 때

1) constructor

• 생성자 함수.
• 만든 컴포넌트가 브라우저 상에서 나타날 때 가장 먼저 실행되는 함수.
• 주로 컴포넌트가 가지고 있을 state의 초기 설정 또는 컴포넌트가 만들어지는 과정에서 먼저 처리가 돼야 하는 작업이 있을 경우 실행됨.

2) getDerivedStateFromProps

• Props로 받은 값을 state에 그대로 동결하고 싶을 때 사용
• Mounting 과정에서 사용되며 Updating 과정에서도 Props가 바뀌게 되면 실행되는 함수.

3) render

• 어떤 DOM을 만들게 될지, 내부의 태그는 어떤 값을 전달할지를 결정하는 함수
  - 그나마 눈에 익는 함수

4) componentDidMount

• 컴포넌트가 브라우저상으로 나타나게 되면 호출되는 함수
• 주로 외부 라이브러리(차트 라이브러리 같은)를 사용할 때 이 함수에서 특정 DOM에다가 차트를 그려달라고 요청하거나, 네트워크요청, API, AJAX요청을 하게 될 경우에도 여기서 처리함.
• 컴포넌트가 나타난 후 몇 초 뒤에 특정 행동을 하고싶다, 컴포넌트가 나타난 후 스크롤 이벤트를 읽고싶다 같은 작업을 할때 사용됨.
• 내가 만든 컴포넌트가 브라우저에 나타난 시점에 어떤 작업을 하겠다 라는 것을 명시해줌.
• 이벤트 리스닝, API요청 등을 처리함.

1-2. Updating

• 컴포넌트의 Props가 바뀌거나 state가 바뀌었을 때

1) shouldComponentUpdate

• 컴포넌트가 업데이트되는 성능을 최적화시키고 싶을 때 사용
• 컴포넌트는 기본적으로 부모 컴포넌트가 리렌더링될 경우 자식 컴포넌트들도 다 렌더링이 실행되게 되있음.
• 가끔씩은 위 작업이 불편해질 수 있는데(컴포넌트가 실제로 업데이트된것만 바뀌면 되는데, 실제로 바뀌지 않았더라도 일단은 virtual DOM에 렌더링 내용을 작성함) 위 작업의 실행여부를 결정하는 함수임.
• shouldComponenetUpdate는 True/false 값을 반환하는데 True값을 반환하면 렌더링 프로세스를 거치고, false 값을 반환하면 해당 함수에서 멈춤.
• virtual DOM에도 렌더링을 할지 말지 정하는 함수.

2) getSnapshotBeforeUpdate

• render함수가 호출되고 난 후 호출되는 함수.
• 렌더링을 한 다음 렌더링을 한 결과물이 브라우저 상에 반영되기 바로 직전 호출되는 함수.
• 렌더링을 하고 나서 업데이트하기 전 스크롤의 위치, 해당 DOM의 크기 등을 사전에 가져오고 싶다 와 같은 작업을 할 때 사용됨.

3) componentDidUpdate

• updating 과정을 마치고 컴포넌트가 업데이트 되었을 때 호출되는 함수.

1-3. Unmounting

• 컴포넌트가 브라우저 상에서 사라질 때

  1) componentWillUnmount

• mounting 과정의 componentDidMount 함수에서 설정한 EventListner 등을 없애는 작업을 하는 함수.