리액트 컴포넌트의 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(() => {
}, [])
Author And Source
이 문제에 관하여(리액트 컴포넌트의 lifecycle), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@lyj-ooz/리액트-컴포넌트의-lifecycle저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)