React의 모든 컴포넌트는
초기화 단계, 업데이트 단계, 소멸단계를 거칩니다.
이러한 흐름을 Lifecycle 생명주기 라고 합니다.
초기화 단계는 최초에 컴포넌트 객체가 생성 될 때 한번 수행되는 과정입니다.
업데이트 단계는 컴포넌트가 마운트 된 이후 컴포넌트의 속성값(props) , 상태값 (state)이 변경되면 업데이트 단계가 실행 됩니다.
소멸단계는 컴포넌트가 소멸 할 때의 과정입니다.
초기화 단계
- 초기화 단계는 최초에 컴포넌트 객체가 생성 될 때 한번 수행되는 과정입니다.
- 초기와 단계에서 실행되는 함수
- Constructor() :
- 메소드를 바인딩하거나 state(상태)를 초기화 하는 작업이 없다면 constructor(생성자)가 없어도 됩니다 .
- react 컴포넌트의 constructor(생성자)는 해당 컴포넌트가 마운트 되기 전에 호출됩니다.
- 생성자를 구현하면 this.props가 생성자 내에서 정의 되도록 super(props)를 호출해야 합니다.
- state의 값을 변경하고자 한다면 , constructor() 외부에서 this.setState()를 통해 수정해야 합니다.
- render()
- Class 컴포넌트에서 반드시 구현되어야 하는 유일한 메소드 입니다.
- 이메소드가 호출되면 this.props와 this.state의 값을 활영하여 값을 변환합니다 .
- render()함수는 컴포넌트의 state를 변경하지 않고 호출 될 때마다 동일한 결과를 반환하며 브라우저와 직접적인 상호작용을 하지 않습니다.
- componentDidMount()
- 컴포넌트가 마운트 된 직후에 호출됩니다.
- DOM 노드가 있어야 하는 초기화 작업이 이루어지면 좋습니다.
- 외부에서 데이터를 불러와야 한다면 네트워크 요청을 보내기 좋은 위치입니다.
- Constructor() :
업데이트 단계
- 업데이트 단계는 컴포넌트가 마운트 된 이후 컴포넌트의 속성값(props) , 상태값 (state)이 변경되면 업데이트 단계가 실행 됩니다.
- 업데이트 단계에서 실행되는 함수
- componentDidUpdate()
- render가 일어난 직후에 호출되며 최초 랜더링에서는 호출 되지 않습니다.
- componentDidUpdate()
소멸단계
- 소멸단계에서는 컴포넌트가 소멸 할 때의 과정입니다.
- 소멸단계에서의 함수
- componentWillUnmount()
- 컴포넌트가 마운트 해제되어 제거되기 직전에 호출 됩니다.
- 타이머 제거, 네트워크 요청 취소, componentDidMount()에서 생성된 작업 등을 정리할때 사용됩니다.
- 실행직후 컴포넌트는 랜더링 되지 않으므로 setState() 호출을 하면 안됩니다.
- componentWillUnmount()
Reference
https://velog.io/@delilah/React-5-Component-%EC%BB%B4%ED%8F%AC%EB%84%8C%ED%8A%B8%EC%9D%98-%EC%83%9D%EB%AA%85%EC%A3%BC%EA%B8%B0
https://velog.io/@lee_geon_woo4336/React-%EC%83%9D%EB%AA%85%EC%A3%BC%EA%B8%B0-%EB%B0%8F-Class%ED%98%95%EA%B3%BC-%ED%95%A8%EC%88%98%ED%98%95-%EC%83%9D%EB%AA%85%EC%A3%BC%EA%B8%B0%EC%9D%98-%EC%B0%A8%EC%9D%B4%EC%A0%90
반응형
'기술면접' 카테고리의 다른 글
event loop에 대해서 설명하세요. (0) | 2021.12.21 |
---|---|
리액트 라우터같은 Client Side Routing 에 대해서 설명하세요. (0) | 2021.12.17 |
state를 직접 변경하지 않고 setState를 사용하는 이유에 대해서 설명하세요. (0) | 2021.12.13 |
Reflow가 발생하는 이유와 방지 방법은 무엇인가요? (0) | 2021.12.08 |
웹페이지 redirect의 다양한 구현법에 대해서 설명하세요. (0) | 2021.12.08 |