Component의 Lifecycle

React의 Component는 대표적으로 Mount/Update/Unmount 라는 lifecyle을 가진다.

• Mount : Component가 페이지에 장착되는 시점
• Update : Component가 갱신되는 시점
• Unmount : Component가 제거되는 시점

Lifecycle에 code 간섭이 가능한데 DB의 Trigger처럼 Lifecycle이 도달한 시점에 특정 코드를 실행하는 것이 가능하다.

---

Class로 구현한 Component의 경우

class DetailPage2 extends Component {
  componentDidMount() {
    // Mount시 실행되는 코드
  }

  componentDidUpdate() {
    // Update시 실행되는 코드
  }

  componentWillUnmount() {
    // Unmount시 실행되는 코드
  }
}

Component 정의시 componentDidMount, componentDidUpdate, componentWillUnmount에 간섭할 코드를 작성할 수 있다.

---

Function으로 구현한 Component의 경우

function DetailPage (props) {
	useEffect(() => {
	  // Mount/Update 시 실행되는 코드
	}
}

---

Component 내부에 작성하는 코드와 useEffect에 작성하는 코드의 차이는?

component 내부에 작성하는 코드는 HTML을 렌더링 전에 혹은 렌더링 중에 실행되지만 useEffect 내에 작성한 코드는 HTML을 모두 렌더링한 이후에 실행된다.

---

Lifecycle 간섭 코드는 언제 쓰면 좋을까

• 복잡한 연산이 필요한 경우
• 서버에서 데이터를 가져와야 할 때
• 타이머 사용

---

useEffect의 사용성

// mount시에만 호출되어야 하는 코드
useEffect({
	// code
}, [])

// 특정 state의 update에만 호출되어야 하는 코드
useEffect({
	// code
}, [stateName])

// unmount시 호출되어야 하는 코드
useEffect({
	return(
    	// code
	)
}, [])

// clean up function
useEffect({
	return (
    	// 이 부분이 clean up function
        // return 바깥의 내용이 실행되기 전에 미리 실행된다.
	)
})