search

gincheong / Memo

개발 관련 내용들을 메모하기 위한 용도로 만든 빈 레포지토리입니다.
0 stars 0 forks source link

React Hook 간단 #31

Open gincheong opened 3 years ago

gincheong commented 3 years ago

useEffect에서 Clean-up 함수 사용하기

useEffect(() => {
  ...  
  return () => {
    // 여기의 코드는, 라이프사이클이 돌아가면서 useEffect가 새로 실행되기 이전에 실행됨
  };
});

그러니까 state가 새로 바뀔 때, 직전의 state에 대한 처리를 저기서 할 수 있음

gincheong commented 3 years ago

useRef로 이전 state의 값 기억하기

const prevValueRef = useRef();
const prevValue = prevValueRef.current;

useEffect(() => {
  console.log('value updated:', prevValue, '->', value);
});
const inProgressTasks = List(store.get('task_list').filter(each => !each.completed));

const prevInProgressTasks = useRef(List());

useEffect(() => {
  prevInProgressTasks.current = inProgressTasks;
}, [inProgressTasks]);
gincheong commented 3 years ago 
useEffect(() => {
  console.log('value updated:', prevValue, '->', value);
}, []); // 이 코드는 한 번만 실행됨