React은 다음과 같이 구성되어 있습니다.

• React란?
• React 컴포넌트 만들기
• useState에 대해
• React로 간단한 구구단게임 만들기!
• props가 번거로울 때 Context API를 사용해보자
• React에서 Bootstrap사용하기
• React 페이지 이동시 최상단 스크롤 방법
• React - lazy, Suspense에 대해
• Link와 useNavigate
• useEffect 정리
• Context API 란?
• React에서 Bootstrap 사용하기
• useMemo 사용
• useTransition에 대해서
• useDeferredValue 사용법

오늘은 useEffect에 대해서 정리해보겠습니다.

컴포넌트 라이프 사이클

컴포넌트는 라이프 사이클이라는 것이 있습니다. 컴포넌트가 페이지에 마운트될 때(생성될 때), 업데이트될 때(재렌더링 시), 삭제될 때가 있다는 것입니다.

이 각각의 상황마다 코드를 실행할 수가 있는데 이럴 때 useEffect를 사용합니다.

클래스형 컴포넌트에서 LifeCycle 다루기

함수형 컴포넌트가 자주 사용되기 이전에는 클래스형 컴포넌트를 사용하였습니다.

class Home extends React.Component {
    componentDidMount() {
        // Home 컴포넌트가 생성된 후에 실행할 코드 작성
    }
    componentDidUpdate() {
        // Home 컴포넌트가 업데이트된 후 실행할 코드 작성
    }
    componentWillUnmount() {
        // Home 컴포넌트가 삭제되기 전에 실행할 코드 작성
    }
}

그때는 위와 같이 componentDidMount, componentDidUpdate, componentWillUnmount 함수를 사용하여 특정한 LifeCycle에서 코드를 실행하였습니다.

함수형 컴포넌트에서 LifeCycle 다루기

요즘에는 대부분 함수형 컴포넌트를 사용하고 권장하는데, 함수형 컴포넌트에서는 useEffect Hook을 사용합니다.

1) 컴포넌트가 실행될 때, 업데이트될 때 마다 실행

useEffect(() => {

}) 

2) 처음 컴포넌트가 마운트될 떄 1번만 실행

useEffect(() => {

}, []) 

3) x가 변경될 때 마다 실행

useEffect(() => {

}, [x]) 

4) x나 y가 변경될 때 마다 실행

useEffect(() => {

}, [x, y]) 

5) useEffect안의 코드가 실행되기 전에 항상 실행

useEffect(() => {
    // ~~~
    return ()=>{
        // ~~~
    }
}) 

6) 컴포넌트가 unmount시에 한번 실행

useEffect(() => {
    return ()=>{
        // ~~~
    }
}, []) 

End.