React Hook 간단

[gincheong]

No description provided.

[gincheong]

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

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

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

[gincheong]

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]

useEffect(() => {
  console.log('value updated:', prevValue, '->', value);
}, []); // 이 코드는 한 번만 실행됨