useEffect로 렌더링 전후 관리

useEffect

화면에 컴포넌트가 렌더링(마운트)/리렌더링 되거나 수정,제거 등의 변경 전(언마운트)에 효과를 주기위해 사용.

 

 

마운트 시점에 콘솔로 확인

마운트시점이란 컴포넌트요소가 화면에 렌더링될 때를 말합니다. 구체적으로 말하면 페이지를 맨처음 로딩할 때, 또 어떤 값을 수정/제거하여 변경된 내용이 다시 로딩될 때입니다. 이러한 상황은 props로 받은 값을 useState로 설정(관리)하거나 외부 Api요청시, setInterval, setTimeout설정, url체크하여 렌더링할 요소를 설정할 때 등이 있습니다.

 

ArrayList.js에서 useEffect를 사용하기위해 먼저 import를 해줍니다. 그리고 아래와 같이 화면출력코드가 있는 TempInfo()항목에 useEffect로 실행될 코드를 선언해줍니다. 렌더링되는 시점에 "렌더링" 텍스트와 tempInfo내용이 출력되도록 해보겠습니다.

import React, { useEffect } from 'react';

function TempInfo({ tempInfo, onRemove, onToggle }) {

  useEffect(() => {
    console.log("렌더링", tempInfo);
  }, [tempInfo]);


  return (
    <div>
        <b style={{
          color: tempInfo.active ? 'orange' : 'black',
          cursor: 'pointer'
        }} onClick={() => onToggle(tempInfo.id)}>
        {tempInfo.username}</b> {tempInfo.email} 
        <button onClick={() => onRemove(tempInfo.id)}>삭제</button>
    </div>
  )
}

function RenderTempInfoArray({ tempInfoArray, onRemove, onToggle }) {

  return (
    <>
      {
        tempInfoArray.map(
          tempInfo => (<TempInfo tempInfo={tempInfo} key={tempInfo.id} onRemove={onRemove} onToggle={onToggle} />)
        )
      }
    </>
  )
}

export default RenderTempInfoArray;

 

처음 로딩화면 - 

 

Anne2리스트를 클릭하여 수정한 내용이 렌더링될 때

 

Anne4를 추가등록한 후 변경내용이 렌더링될 때

 

주의할 점은 배열로 [tempInfo]를 넣은 부분인데요, 디펜던시(deps)라고 부르는 useEffect관리대상(값 또는 function도 포함)을 넣어주지 않으면 이부분의 코드를 변경된 특정 값에 대해만 실행하는게 아니라 추가/수정시 tempInfo를 포함하는 tempInfoArray의 모든 리스트 수만큼, 또 useState로 관리되는 input의 onChange의 모든 상황마다 매번 계속해서 실행하게 됩니다. 불필요하게 코드가 계속 실행되는 거죠. 

useEffect(() => {
    코드부분
  }, [tempInfo]);

 

그리고 만약 디펜던시(deps)영역을 빈 배열형태로 넣으면 로딩 후 변경된 값이 체크안되서 이전의 값을 참고하게 될 수 있으므로 관리대상값은 꼭 deps배열안에 추가를 해주어야 합니다. 

 

 

 

 

언마운트 시점에 콘솔로 확인

언마운트상황은 수정/제거등의 변경진행 전 시점에 효과를 주기위해 사용됩니다. 라이브러리 인스턴스를 제거하던가 setInterval/setTimeout해뒀던 요소를 변경하기위해 clearInterval/clearTimeout하는 상황들을 예로 들 수 있습니다.

 

ArrayList.js에서 추가해줬던 useEffect선언부분에 return부분을 추가해줍니다.

 

  useEffect(() => {
    console.log("렌더링", tempInfo);
    return () => {
      console.log("리렌더링 전", tempInfo);
    }
  }, [tempInfo]);

 

Anne1을 클릭하여 수정시 렌더링전(언마운트)의 active: true값이 출력되고 바로 수정된 false값이 출력(마운트)됩니다.

Anne3을 삭제하기 전 상태값을 출력합니다. 삭제된 리스트항목은 출력할 수 없으므로 렌더링text는 출력되지 않습니다.