라이프사이클이란?

공부하게 된 이유

• React에서 컴포넌트화 할 때 함수형 컴포넌트를 지향하고 클래스형을 지양하라고 배웠다.
• 그 이유와 함께 클래스형 컴포넌트를 배우다 '라이프사이클' 이라는 키워드를 접했고 공부해보았다.

❓라이프사이클이란?

• 컴포넌트의 수명 : 페이지가 렌더링 될때 ~ 페이지가 사라질 때를 말함

1. 마운트가 될 때 (DOM이 생성 되고 웹 브라우저 상에서 나타날 때)
2. 업데이트 될 때
   1. props가 바뀔 때
   2. state가 바뀔 때
   3. 부모 컴포넌트가 리렌더링 될 때
   4. this.forceUpdate로 강제트리거가 될 때
3. 언마운트 될 때

⇒ 그래서 왜씀?

• 컴포넌트가 생겨나고, 변화하고, 없어지는 일련의 프로세스를 통해 프로그래머가 통제를 해야하기 때문..! 사용자와의 상호작용에 대해 컨트롤 하기 위해서 알아야한다.

---

📌마운트

• constructor = 컴포넌트의 생성자 메소드, 컴포넌트가 마운트 되게 전에 호출
• getDrivedStateFromProps = Props로 받아온 것을 State에 넣어주고 싶을 때 사용
• render = 유일한 필수 메소드, 컴포넌트를 렌더링하는 메소드 / 함수형컴포넌트 에서는 render()를 쓰지않고 렌더링 가능
• componentDidMount = 컴포넌트의 첫번 째 렌더링을 마치면 호출되는 메소드

📌업데이트

• getDerivedStateFromProps = 컴포넌트의 state와 props가 바뀌었을 때도 호출
• shouldComponentUpdate = 컴포넌트가 리렌더링을 할지말지 결정하는 메소드 React.memo와 유사
• getSnapshotBeforeUpdate = 렌더링 결과가 실제 돔에 반영되기 직전에 호출 / 변화하기 직전의 getSnapshotBeforUpdate의 반환 값이 componentDidUpdate의 세번째 인자로 들어감. 따라서 “snapshot” 까지 이용해 돔의 상태값 변화를 알 수 있음.
• componentDidUpdate = 최초 렌더링 할때는 호출되지 않고, 업데이트가 일어난 직후에 호출

📌언마운트

• componentWillUnmount= 컴포넌트가 마운트 해제되어 제거되기 직전에 호출

추가학습

💡 🎨불편한 점

• super(props) 항상 해줄 필요가 있나?
  클래스 형태로 리액트 컴포넌트를 만들고 state를 사용한다면 super(props)를 해줘야 함. React.Component에도 props을 넘겨주기 위한 것인데 항상 똑같이 해야 되는 걸 우리가 할 필요가 있나? 라는 의문이 듬
• this가 뭔지 많은 사람들이 헷갈려 한다.
  자바스크립트를공부하다 보면 this가 많이 나오는데 클래스를 사용하다 보면 많이 보임. this에 bind를 해야 class 관련된 함수와 props등에 접근할 수 있습니다. bind를 굳이 직접 선언해야만 하는게 아니라면, 자동으로 해주면 안되는지?.
• HOC 헬
  리액트를 쓰다 보면 자주 쓰는 로직을 따로 빼내서 사용할 필요가 있는데 그전까지는 HOC(High order component)를 사용했음. 그런 것이 한두 개면 괜찮은데 여러 개가 겹치다 보면 HOC 헬을 경험 할 수 있음.