리액트 컴포넌트의 lifecycle

<클래스형 컴포넌트>
render()가 실행되면 리액트가 .jsx 파일을 DOM에 붙인다.
DOM에 붙인 후, 특정 동작을 하도록 설정할 수 있다.

• componentDidMount: 처음 render가 잘 되었다면 componentDidMount가 그 다음 실행된다. 이후 다시 렌더링이 될 때는 이것이 실행되지 않는다.

componentDidMount() {
  // 첫 render가 잘 되었을때, 무엇을 할 지 여기에 작성하면 된다.
}

• componentDidUpdate: 다시 렌더링된 후에는 이게 실행된다.

componentDidUpdate() {
  // 다시 렌더링 될 때마다, 무엇을 할 지 여기에 작성하면 된다.
}

• componentWillUnmount: 컴포넌트가 제거되기 직전에 실행된다. 비동기 요청 정리(clearInterval 같은 것)도 여기서 한다고 한다.

componentWillUnmount() {
  // 컴포넌트가 제거되기 직전, 무엇을 할 지 여기에 작성하면 된다.
}

클래스형 컴포넌트가 처음 실행되면 아래와 같은 순서로 시작된다.

• constructor(state나 메소드 같은 부분들) 실행 -> 첫 render() -> ref -> componentDidMount()

• 이러다 중간에 setState나 props 값이 바뀌면, shouldComponentUpdate -> render() -> componentDidUpdate()

• 컴포넌트가 없어질 땐, componentWillUnmount() -> 컴포넌트 없어짐

<함수형 컴포넌트 hooks>

useEffect(() => {

}, [])