[React] 리액트의 라이프 사이클 🤔

리액트를 좀 공부하다 보니 컴포넌트의 생명주기에 대해서도 알아봐야 할 것 같아서 정리해본다.

우선 이 생명주기라는게, 컴포넌트가 화면에 나타나서 업데이트되고 사라질 때까지의 주기를 말한다.

이 주기에 사용되는 메서드들 세 가지는 다음과 같다. 이 메서드들을 useEffect 훅과 비교해서 살펴보려 한다.

• componentDidMount()
• componentDidUpdate()
• componentWillUnmount()

 

mount ?? 

먼저 마운트(mount)라는 용어가 무엇인지를 알아야겠다.

마운트와 언마운트가 있는데, 마운트는 사전적인 의미로는 '시작하다'라는 뜻이지만-
리액트 컴포넌트에서의 마운트는 DOM 트리가 생성되고 웹브라우저에 나타날 때를 말한다.

그러니 이렇게 말할 수 있겠다.

• 마운트(mount) : 컴포넌트가 최초로 렌더 될 때의 과정
• 언마운트(unmount) : 컴포넌트가 삭제될 때의 과정

 

 

componentDidMount()

이 메서드는 컴포넌트가 평가되고 DOM에 렌더링 될 때, 즉 마운트 된 직후에 호출된다.

useEffect(() => {
    setFilteredUsers(DUMMY_USERS.filter((user) => user.name.includes(searchTerm)));
}, []);

훅과 비교하자면, 의존성 배열이 비어있는 useEffect 훅과 같은 역할을 한다고 할 수 있다.
모든 effect 함수는 컴포넌트가 처음 렌더링 되는 - 마운트 될 때 실행되고, 의존성 배열에 아무것도 없다면 처음 실행된 이후로 다시 실행되지 않기 때문!

 

 

componentDidUpdate()

이 메서드는 컴포넌트가 갱신될 때마다 호출되는 메서드다.
컴포넌트의 상태가 변경되었을 때 컴포넌트가 재평가되며 렌더링이 다시 일어날 때를 말한다.

useEffect 훅의 의존성 배열에 값이 존재하는 경우, 이 값이 변경될 때마다 useEffect 함수도 다시 재실행되기 때문에 같은 역할을 한다.
컴포넌트가 재평가 되거나 리렌더링 될 때 의존성 배열도 재평가되기 때문!

useEffect(() => {
    setFilteredUsers(DUMMY_USERS.filter((user) => user.name.includes(searchTerm)));
}, [searchTerm]);

searchTerm이라는 값에 변화가 일어날 때마다 재실행된다.

 

 

componentWillUnmount()

이 메서드는 컴포넌트가 DOM에서 삭제되기 직전에 호출된다.
useEffect 훅의 클린업 함수와 같은 역할을 한다.
클린업 함수는 useEffect 훅 안에 return 값이 정의된 함수로, useEffect가 다시 실행되기 직전에 호출되고, 컴포넌트가 DOM에서 삭제되기 전에 다시 호출된다.

useEffect( return ()=> {
        console.log('User will unmount');
    }
}, []);

 

 

 

참고

• https://ko.reactjs.org/docs/hooks-effect.html
• Udemy React 완벽 가이드 with Redux, Next.js, TypeScript

 

 

 

 

---

🤸‍♀️🤸‍♀️🤸‍♀️🤸‍♀️🤸‍♀️🤸‍♀️

방문해주셔서 감사합니다! 🙌

포스팅들은 공부중인 내용을 글로 작성한 것이라 부족한 점이 많으니 참고 부탁드립니다. 

부족한 부분에 대한 코멘트는 언제나 환영입니다.

좋은 하루 되세요, 감사합니다! 🙂