[리액트] 라이프 사이클 함수

[라이프사이클] : 컴포넌트가 생성~업데이트~죽는 '컴포넌트 생명주기'

리액트 라이프 사이클 흐름 @react official

렌더링(탄생) ··· 업데이트 ··· 사라지는것 / 새로고침(사망)

 

---

'라이프 사이클 함수'는 클래스형 컴포넌트에서만 사용할 수 있다.

---

constructor() : 생성자 함수

props 받아오고, state의 기본값도 설정해 줄수 있다.

가장 처음으로 불려오고, 어떤 설정을 만들어 주는 애

constructor(props) {
	super(props);
	this.state = {
		name : "버터호두",
	};
}

---

render()

props에 접근해서 데이터를 보여주는 애

렌더 당시에 데이터를 수정하면 안됨!

---

componentDidMount()

마운트(mount) : 컴포넌트가 화면에 나타난다.

첫 렌더가 된 직후 한번만(첫번째만) 실행되는 함수

---

componentDidUpdate()

state가 변화하면 다시 렌더를 하는데,

두 번 세 번 렌더가 될때 실행되는 함수

---

componentWillUnmount()

컴포넌트가 DOM에서 제거될때 실행되는 함수

ex) 클릭 event, 스크롤 event 등

어떤 eventListener를 등록했다면 여기에서 해제를 반드시 해줘야 한다.

컴포넌트 없이 이벤트만 남겨줄 순 없으니까!

---

+

react hook이 생긴 이후로 함수에서도 상태관리가 되서 클래스형은 많이 쓰이지 않는다고 한다.

그럼 왜 공부를 해야할까? 싶었는데, 튜터님 말씀은 -

라이프사이클 함수로 제대로 배우면 컴포넌트/상태 생명주기를 명확하게 알 수 있기 때문이라고 한다.

공부할 목적이 분명해졌다.