렌더링 이후시점만 catch 하는법

김태완·2022년 5월 26일
1

React

목록 보기
14/24

useEffect를 쓰면 의존배열에 data값을 넣어주어도, 최초렌더링(mount시) + data가 변할시 리렌더링이 된다.
나는 최초 렌더링시와 data가 변할시를 구분해주고싶었는데, useRef를 이용하여 렌더 전후를 구분하는 방법을 알아보자

useRef의 current값을

const didMount = useRef(false);

useEffect(()=>{
	// 최초 렌더링시
},[])

useEffect(() => {
    if (didMount.current) {
    // data가 변화시 (최초렌더링시 X)
      console.log("data가 바뀌었을때 행동");
    } else {
      didMount.current = true;
    }
}, [data]);
profile
프론트엔드개발

1개의 댓글

comment-user-thumbnail
2023년 3월 30일

useState를 사용하는 방법도 가능. Ref는 태그의 레퍼런스용도이므로 useState가 더 바람직함

답글 달기