[React] lifecycle과 useEffect에 대해 알아보자

guinness5167·2022년 2월 3일
0

React

목록 보기
7/9

오늘은 class형 컴포넌트의 lifecycle과 관련이 깊은 useEffect에 대해 알아보고자 합니다.

class형 컴포넌트의 lifecycle에는

1) componentWillMount
2) componentDidMount
3) componentDidUpdate
4) componentWillUnmount

이 있습니다.

컴포넌트가 처음 실행될 때를 Mount라고 표현합니다. 컴포넌트가 시작되면 우선 context, defaultProps와 state를 저장하고 그 후에 componentWillMount 메소드를 호출합니다. 그리고 render로 컴포넌트를 DOM에 부착한 후 Mount가 완료되면 componentDidMount가 호출됩니다.

주의할 점은, componentWillMount에서는 props나 state를 바꾸면 안 됩니다. Mount 중이기 때문이죠. 그리고 아직 DOM에 render하지 않았기 때문에 DOM에도 접근할 수 없습니다.

그리고 componentDidUpdate는 리랜더링이 될 때마다 호출되는 메소드, componentWillUnmount는 컴포넌트가 끝날 때 호출되는 메소드입니다.

class형 component의 lifecycle이 functional component에서는 어떻게 사용되고 있을까요?

useEffect

useEffect를 통해 사용되고 있습니다.

1) componentDidMount

  useEffect(() => {
    console.log("마운트 됨");
  }, []);

componentDidMount는 위처럼 처음 마운트되었을 때처럼과 동일하게 사용할 수 있습니다.

2) componentDidUpdate

 useEffect(() => {
  console.log("수정되고 다시그려짐");
 });
 
 useEffect(() => {
  console.log("수정되고 다시그려짐");
 }, [count]);

componentDidUpdate는 위처럼 사용되는데 첫 번째 useEffect는 컴포넌트 내의 state가 변경되어 랜더링될 때마다 실행되고, 두 번째 useEffect는 deps에 들어있는 값이 업데이트될 때에만 안에 있는 함수가 실행됩니다.

3) componentWillUnmount

useEffect(() => {
 return () => {
   console.log("여기서 나갈래요");
 };
}, []);

위처럼 return 뒤에 화살표 함수를 써주게 되면 useEffect를 사용하는 컴포넌트에서 빠져나갈 때 바로 직전에 실행되게 됩니다.

주의할 점은 router나 history를 사용하면 componentWillUnmount의 기록이 남아있지만 window.location.href를 사용하게 되면 새로고침되어 저장된 값들도 사라지게 되니 주의하시길 바랍니다. 이와 연관된 SPA에 관한 내용은 추후 다루도록 하겠습니다.

profile
1일 1커밋 1블로그!

0개의 댓글