1. Component Life Cycle

컴포넌트한테도 인생이 있음. 컴포넌트는

1. 생성이 될 수도 있고 (mount)
2. 재렌더링이 될 수도 있고 (update)
3. 삭제가 될 수도 있습니다. (unmount)

컴포넌트의 인생을 배우는 이유는 컴포넌트 인생 중간중간에 간섭할 수 있기 때문입니다.

• 간섭이 뭐냐면? 그냥 코드실행
  • 컴포넌트가 장착이 될 때, 특정 코드를 실행
  • 컴포넌트가 업데이트될 때, 특정 코드를 실행

예시

• “App 컴포넌트 등장 전에 이것좀 해줘”
• “App 컴포넌트 사라지기 전에 이것좀 해줘”
• “App 컴포넌트 업데이트 되고나서 이것좀 해줘”

이렇게 코드좀 실행해달라고 간섭할 수 있는데, 간섭은 갈고리(Hooks)를 달아서 합니다. 그래서 저걸 Lifecycle hook이라고 부름

2. class 컴포넌트에서 Life Cycle

1
// 이렇게 class 문법을 사용해서 선언함
2
class App extends Component {
3
  componentDidMount() {
4
    // App 컴포넌트가 로드되고나서 실행할 코드
5
  }
6
  componentDidUpdate() {
7
    // App 컴포넌트가 업데이트 되고나서 실행할 코드
8
  }
9
  componentWillUnmount() {
10
    // App 컴포넌트가 삭제되기전에 실행할 코드
11
  }
12
  render() {
13
    const name = 'react'
14
    return <div className="react">{name}</div>
15
  }
16
}

• https://ko.reactjs.org/docs/react-component.html
  • 예전에 작성한 코드를 볼 떄, 유지보수해야할 떄 찾아서 보기

[참고] 공식문서

• The Component Lifecycle (컴포넌트의 생명주기)