TIL 14 | 라이프사이클

TIL

정리할게 너무 너무 많아요

라이프사이클 이란

컴포넌트가 렌더링을 준비하는 순간부터, 페이지에서 사라질 때까지가 라이프사이클이라고 한다.

페이지에 진입할 때 '렌더링'
데이터가 변했을 때 '리 렌더링'

컴포넌트는 생성되고, 업데이트되고, 사라지는데,
업데이트가 되는 경우는 네가지의 경우가 있다.

• props 가 바뀔 때
• state 가 바뀔 때
• 부모 컴포넌트가 업데이트 되었을 때 ( =리렌더링 했을 때 )
• 강제로 업데이트 했을 경우 (forceUpdate())

제거는 페이지를 이동하거나, 컴포넌트가 사라질 때.

내가 순수하게 이해한 대로만 설명해 보자면,

DOM 이 계속 생기는 과정에서 DOM 은 트리 구조 이므로, 사용자에 의해 데이터가 수정됬을 때 즉각반영 하기 위해서는 오랜시간이 걸릴 수 있고, 사용자가 느끼기에 매끄럽지 못하고 불편함을 느낄 수 있기 때문에 사용자의 상호작용을 가상 DOM 을 통해 그리고, 나중에 업데이트 해준다. 이 때 생성된 가상 DOM 이 탄생해 사라지기 까지의 과정을 라이프사이클 이라고 한다.

라고 이해했는데 맞으려나..

라이프사이클 함수

라이프사이클 함수는 클래스형 컴포넌트에서만 쓸 수 있다.
대부분의 내용은 공식문서 에서 확인할 수 있으니 설명은 간단히 이해한 내용만 쓰고 넘어갈게요.

내가 이해한 바로는,

컴포넌트가 생성되고 없어지면서 라이프사이클 함수는 기본적으로 사용된다. 우리는 적재적소에 필요에 따라 라이프사이클 함수를 불러내어 원하는 명령을 줄 수 있고, 데이터를 관리할 수 있다.

정도

constructor()

constructor 는

• 가장 처음 호출
• props 를 받아오고, state 의 기본값 설정 가능
• 가장 먼저 class 형 컴포넌트에 대해 설정을 만져줌

render()

• 컴포넌트의 모양을 정의
• state 와 props 에 접근해서 데이터를 보여줄 수 있음
• return 으로 UI 요소 반환!
• render 당시에는 state 와 props 수정 불가

componentDidMount()

• 컴포넌트가 화면에 나타나는 것이 마운트
  ( DidMount 마운트가 완료되었다. )
• render 가 처음된 직후에 한번 불러옴
• 다시 render 후에는 불러오지 않음
• 이 안에서 Ajax 요청을 하거나, 이벤트를 등록하거나, 함수 호출의 작업을 하기도 함
• 가상 DOM 이 실제 DOM 으로 올라갔다는 것
  👉 DOM 요소에 접근을 하는 것도 괜찮다.
  👉 div 를 만질 수도 있다.

componentDidUpdate()

• state 를 바꿔주면( setState ) 다시 render 되고, 그다음 실행!
• 지금 내가 가진 state, props 말고 이전의 값들도 볼 수 있음
  👉 데이터 비교가 필요한 순간 불러내서 처리할 수 있겠구나!
  👉 DidUpdate() 후에도 가상 DOM 이 올라간 후니까 DOM 관련 처리를 해도 된다.

componentWillUnmount()

• 컴포넌트가 제거될 때 실행하는 함수
• DOM 에 걸려있던 이벤트를 전부 제거해줌
  👉 조건부 렌더링을 통해 라이프사이클 제거 (??)

const [is_show, setIsShow] = React.useState(true);
<div>
	{is_show? (<LifecycleEX/>):null}
	<button onClick={() => {setIsShow(false)}}> 없어져라!!<button/>
</div>
// 이런걸 설명해 주셨는데 나중에 알게된다고 하셨음