[React] Hooks - useEffect ( )

[React] Hooks - useEffect ( )

 

📌 클래스형 컴포넌트의 생명주기

[React] 라이프사이클(LifeCycle) - React 의 생명주기

Mount	Update	Unmount
ComponentDidMount	ComponentDidUPdate	ComponentWillUnmount
컴포넌트가 태어나는 순간 mount 되는 순간에 사용할 수 있는 메서드	컴포넌트가 변화하는 순간에 사용할 수 있는 메서드	컴포넌트가 화면에서 사라지기 이전에 사용할 수 있는 메서드

📌 useEffect 

함수형 컴포넌트 본문에서 Side Effect 는 허용되지 않기 때문에 useEffect 라는 훅을 사용한다.

함수형 컴포넌트의 useEffect 는 클래스형 컴포넌트의 Life Cycle 의 componentDidMount, componentDidUpdate, componentWillUnmount 훅을 하나의 API 로 합친 것이다.

 

useEffect(didUpdate[, deps]);

useEffect 에 전달된 함수는 렌더링이 완료된 이후에 수행된다.

deps(dependency array, 의존성 배열) 는 비워놓거나 빈배열, 비교할 값을 넣을 수 있다.

 

의존성 배열(Dependency Array)
    : 이 배열 내에 들어있는 값이 변하면 콜백 함수가 실행된다(뎁스라고도 부른다).

 

📌 Mount (처음 렌더링될 때)

컴포넌트가 렌더링 되고 나서 최초의 한번만 실행하고자 하는 함수가 있다면 deps 에 빈 배열을 넣어주면 된다.

useEffect(() => {
    console.log('Mount 되었습니다.');
}, []);

 

📌 Update (리렌더링)

만약 빈배열도 넣지 않고 비워둔다면 해당 함수는 컴포넌트가 리렌더링이 될 때마다 실행된다.

useEffect(()=>{
    console.log('페이지가 Update 되었습니다.')
})

 

특정 prop 이나 state 가 변경될 때마다 함수를 실행하고 싶다면 다음과 같이 배열 안에 해당 prop, state 를 넣어준다.

useEffect(()=>{
    console.log(`${count} 가 변경되었습니다.`)
}, [count])

위의 경우처럼 함수 안에 prop 또는 state 가 있을 경우에 deps 에 배열을 넣어주면 된다.

 

📌 unmount (또는 Update 되기 직전)

이 함수자체는 마운트이지만, 함수 안에서 return 문을 반환하면 unmount 시에 실행된다.

useEffect(() => {
    console.log('해당 컴포넌트가 Mount 되었습니다.');
    
    return () => {
        // unmount 시점에 실행
        console.log('해당 컴포넌트가 Unmount 되었습니다.');
    };
}, []);

 

 

 

---

참고 : 리액트 공식 문서, 멋쟁이사자처럼 4기 yamoo9 강의, 인프런-한입 크기로 잘라먹는 리액트 강의 수강
  등을 공부하고, 간단하게 정리한 내용입니다. 잘못된 부분이나 문제되는 점이 있으면 댓글 부탁드립니다.