[DAY42] WIL

react hooks

라이프 사이클

React에서 라이프사이클(생명주기) 란?
컴포넌트는 각각 [Mount] → [Update] → [Unmount] 의 과정을 거침
모든 컴포넌트에는 각각의 생명주기가 존재하고, 각 생명주기에 맞는 메서드들이 있다.
생명주기 메서드는 컴포넌트가 브라우저상에 나타나고(Mount), 업데이트되고(Update), 사라지게(Unmount) 될 때 호출되는 메서드이다.

클래스형 Lifecycle

1. Mount

• constructor : 생성자 메서드
• getDerivedStateFromProps : props로 받아온 것을 state에 넣어주고 싶을 때
• render : 렌더링
• componentDidMount : 컴포넌트의 첫번째 렌더링을 마치고 나면 호출되는 메서드

2. Update

• getDerivedStateFromProps : 컴포넌트의 props나 state가 바뀔 때
• shouldComponentUpdate : 리렌더링 할지 말지 결정
• render : 렌더링
• getSnapshotBeforeUpdate : 컴포넌트에 변화가 일어나기 직전의 DOM 상태를 가져와서 특정 값을 반환하면 그 다음 발생하게되는 에서 받아와서 사용 가능
• componentDidUpdate : 리렌더링 마치고 화면에 변화가 모두 반영되고 난 뒤 호출

3. Unmount

• componentWillUnmount : 컴포넌트가 화면에서 사라지기 직전에 호출, DOM에 직접 등록했었던 이벤트 제거. ex) setTimeout => clearTimeout 을 통해 제거.

• 외부 라이브러리 사용했고 해당 라이브러리에 dispose 기능이 있다면 여기서 호출

함수형 = React Hooks

1. Mount

• 함수형 컴포넌트가 호출 되었을 때 컴포넌트 내부가 호출됨 : 클래스형 컴포넌트의 constructor
• return : 클래스형 컴포넌트의 render : 미리 구현한 HTML을 화면상에 보여줌
• useEffect : 클래스형 컴포넌트의 componentDidMount

2. Update

• useEffect : 클래스형 컴포넌트의 componentDidUpdate : 의존성 배열내에 값이 있을 경우, 그 값이 바뀔때마다 update됨

3. Unmount

• useEffect : 클래스형 컴포넌트의 componentWillUnmount : useEffect의 return 부분.

---

React Hooks

useEffect

컴포넌트 내에서 변화가 발생하였을 경우 실행
-> 부모 컴포넌트로부터 받은 props값의 변화가 생기거나, 부모 컴포넌트가 리렌더링 될 때
-> 해당 컴포넌트 내에서 state 값이 변할 때