[React] useEffect Hook과 Lifecycle Hook의 비교
지금은 class형 컴포넌트와 Lifecycle Hook을 사용해서 개발하고 있지만, 현업에서는 function 컴포넌트
와 useEffect Hook
을 많이 사용한다고 합니다.
1. useEffect Hook
사용법은 useEffect Hook
이 좀 더 간단한데 function 컴포넌트 안에 Hook을 입력하면 됩니다(return 전).
import React, {useState, useEffect} from 'react';
function Detail(){
useEffect(()=>{
//코드를 적습니다 여기
});
return (
<HTML/>...
)
}
useEffect
를 사용하기 위해서는 미리useEffect
를 import 해주어야 합니다.- useEffect() 를 입력 후 안에 콜백함수를 집어넣습니다.
- 콜백함수 안에는 Detail 컴포넌트가 첫 등장하고나서 실행하고싶은 코드가 있으면 적어주면 됩니다.
useEffect() 내의 코드의 실행조건은
- 컴포넌트가 첫 등장해서 로딩이 끝난 후에 (mount가 끝났을 때)
- 컴포넌트가 재렌더링 되고난 후 때 (update 되고난 후에)
입니다.
2. Lifecycle Hook
useEffect Hook
에 비해서 조금 복잡하지만 Lifecycle Hook
을 이용하면 컴포넌트의 Lifecycle 주기에 대해서 조금 더 확실한 이해가 가능합니다.
컴포넌트는 Lifecycle의 개념에 따라서 컴포넌트는
- 생성이 될 수도 있고,
- 삭제가 될 수 있고,
- 관련된 state가 변경되면 재렌더링이 일어나 업데이트가 될 수도 있습니다.
class Detail2 extends React.Component {
componentDidMount(){
//Detail2 컴포넌트가 Mount 되고나서 실행할 코드
}
componentWillUnmount(){
//Detail2 컴포넌트가 Unmount 되기전에 실행할 코드
}
}
- componentDidMount()는 컴포넌트 첫 등장 후 실행할 코드
- componentWillUnmount()는 컴포넌트가 사라지기 전 실행할 코드
로 이해하면 됩니다.
Author And Source
이 문제에 관하여([React] useEffect Hook과 Lifecycle Hook의 비교), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@lemuel0525/useEffect-Hook과-Lifecycle-Hook의-비교저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)