[Issue] useEffect, useState 버그 !

리엑트 개인프로젝트를 진행하던 중, useEffect와 useState에대해 잘못 이해하고 있어, 

 

기록을 위해 남긴다.

 

나는 useEffect를 초기 화면 페이지 로딩 시 한번만 호출해주기 위해 사용한다고 이해하고 있었다 !

 

deps의 개념은 흐지부지하게 기억하고 있어 이슈가 발생하였는데 발생한 이슈는

 

나는 setStatus를 2개 사용하고 있다.

1. 날짜 컴포넌트 바꿀때

2. 날짜가 바뀔때 바뀐 날짜를 이용해 API를 호출해 가져와서 셋팅해줄때
버튼을 누를때마다 이게 setState가 비동기적으로 동작하여, 날짜를 찍어보니 서로 상이한 날짜를 찍고 있었다 !!

 

 

해당 부분에 대해서 어떻게 해결을할까 고민하던중 ~ useEffect의 deps의 개념이 정리된 블로그를 확인했다 !

 

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

useEffect의 요런 코드가 있을때,

count State가 변경되면 useEffct안의 내용을 실행해주세요로 동기적으로 동작할수 있게 해준다는것을 배웠다 !!

 

그래서 setState를 두번하던 소스를 제거하고

 

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

소스를 위와같이 수정하니 정상적으로 동작하는 부분을 확인했다 ~~

 

 

 

마지막으로 하나 더 useEffect에는 컴포넌트가 언마운트(사라질 때) 작업도 해줄 수 있다 

 

useEffect(() => {
    console.log('컴포넌트가 화면에 나타남');
    return () => {
      console.log('컴포넌트가 화면에서 사라짐');
    };
  }, []);

 

보통 마운트 시 (화면에 나타날때)

• props로 받은 값을 컴포넌트의 로컬 상태로 설정
• 외부 API요청
• 라이브러리 사용(D3, video.js등)
• setInterval을 통한 반복작업 혹은 setTimeout을 통한 작업 예약

언마운트 시 (화면에서 사라질때)

• setInterver, setTimeout을 사용한 작업들 clear하기 (clearInterval, clearTimeout)
• 라이브러리 인스턴스 제거

위 작업을 한다고 보면 될 것 같다 !

 

오늘도 많이 배운다 

 

다들 화이팅 ~