[React #25] React LifeCycle / UseEffect

01. 리액트 컴포넌트의 라이프사이클

Mount (마운트)

• 컴포넌트가 화면에 처음으로 렌더링 되는 순간
• ex) 서버에서 데이터를 불러올 때

Update (업데이트)

• 마운트 이후 컴포넌트가 다시 렌더링 되는 순간 = 리렌더링 되는 순간
• ex) 서버에서 값이 변경될 때

UnMount (언마운트)

• 컴포넌트가 화면에서 사라지는 순간
• ex) 메모리를 정리할 때

 

💡 라이프 사이클 제어

컴포넌트의 라이프 사이클 단계별로 각각 다른 작업을 수행하도록 만드는 것

라이프 사이클 제어는 useEffect를 이용해서 쉽게 구현할 수 있음

 

 

 

02. UseEffect

컴포넌트 동작에 따른 파생되는 효과인  사이드 이펙트를 제어하는 리액트 훅

컴포넌트에 어떠한 값이 변경되었을 때, 특정 코드를 실행시키거나 제어하는 것을 만들 수 있음

 

UseEffect의 기본

useEffect(()=>{},[])

• 첫 번째 인수로는 콜백 함수, 두 번째 인수로는 배열 전달
  → 두 번째 인수로 전달한 배열의 값이 바뀔 때마다 첫 번째 인수로 전달한 콜백 함수 실행

DEPTH(뎁스)

• 두 번째 인수로 전달한 배열에 무슨 값을 넣느냐에 따라 다르게 동작하기 때문에 이 배열을 의존성 배열이라고 부름
• 영어로는 dependency array 줄여서 depth(뎁스)라고 함
• 여기에는 값을 여러 개 넣을 수 있음

 

UseEffect의 연습

const [count, setCount] = useState(0);
const [input, setInput] = useState('');

useEffect(() => {
    console.log(`count : ${count}, input : ${input}`);
}, [count, input]);

count와 input의 값이 바뀔 때마다 console 출력

 

실행화면

 

UseEffect의 활용

✏️ Mount (마운트)

• depth에 빈 배열을 넣는다면 마운트 되었을 때 한번만 실행함
• 컴포넌트가 마운트 되었을 때 최초로 한 번만 실행시키고 싶은 코드를 입력

  useEffect(() => {
    console.log('mount');
  }, []);

실행화면

 

✏️ Update (업데이트)

• depth를 생략하면 마운트 될 때 한번 실행한 다음 컴포넌트가 리렌더링 될 때마다 계속 실행됨

  useEffect(() => {
    console.log('update');
  });

 

마운트 시점을 제외하고 컴포넌트가 업데이트 되는 순간에만 실행하고 싶다면 

마운트가 되었는지 안 되었는지 체크하는 변수 'useRef'를 생성하여 플래그로 활용하기

  useEffect(() => {
    if (!isMount.current) {
      isMount.current = true;
      return;
    }
    console.log('update');
  });

- 컴포넌트가 최초로 실행될 때 조건문이 참이 되어 강제로 return되기 때문에 아래의 일을 수행할 수 없고

컴포넌트가 리렌더링 되어서 다시 호출될 때 console.log가 실행됨

실행화면

 

✏️ UnMount (언마운트)

• Mount를 제어하는 방법에서 콜백 함수 안에 새로운 화살표 함수를 하나 더 만들어서 리턴하면 언마운트 될 때 실행함
• 콜백 함수 안에서 새로운 함수를 반환하는 함수를 클린업 또는 정리 함수라고 함
• 이 정리함수는 useEffect가 종료될 때 실행이 됨
• 최적화 작업을 할 때 사용할 수 있음

import { useEffect } from 'react';

function Even() {
  useEffect(() => {
    console.log('짝수mount');
    return () => {
      console.log('unmount');
    };
  }, []);
  return <div>짝수입니다.</div>;
}

export default Even;

실행화면

 

 

참고자료

이정환 Winterlood, '한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지'