1.소소한 디버깅

오늘은 큼직큼직한 기능을 작성하다기 보다
리스트 필터링,검색 그리고 css을 진행한 후
현재 빌드된 서비스를 테스트하던 중 메인페이지에서 버그를 발견했다.

useEffect(() => {
   getItem(items);
  
  }, []);

 useEffect(() => {
    SumAllMonthly();
  }, [items_monthly]);

위의 코드는 아직 서버가 작성되기 전에 임의로 만들어 놓은 페이크 데이터(items)를
스토어에 넣는 기능을 한다.

첫번째 렌더될때만 작동되도록 두번째 변수에 빈 배열 []값을 주었다.
그후 아래 useEffect는 달별 아이템리스트가 바뀔때만 작동하도록 해서 합계를 계산한다 .

내 생각으로는 분명 렌더될때 한번만 돌아야하는데 어느 경우에는 겟아이템이 두번 작동해서
페이크 데이터를 두번 가져오는 문제가 발생했다 .

실제 서버와 연동하면 해결될 문제기는 하지만 생각과는 달리 작동하는 코드에 당황스러웠다.
심지어 항상 그러는 것도 아니고 어쩌다 발생하는 버그라 포인트를 찾기도 힘들어
페어분과 같이 디버깅을 진행했다.

먼저 둘이 버그 발생 이유를 추측해봤다.

1.원래는 로그인이 성공하면 리스폰을 토대로 유저 정보를 스토어에 넣어야 하는데 ,
비동기를 관리하는 로직이 꼬여 메인페이지로 넘어온 후 auth 스토어에 유저정보를 넣는 것 같다?
=>그래서 로그인에서 then 구문으로 비동기를 처리하는 부분을 async/await 으로 리팩토링!
but 문제는 똑같이 발생 그래도 코드가 깔끔해져서 나름 이득 !

2.메인페이지의 라이프 사이클에서 간과한 부분이 있다 ?
=> 메인페이지에서 새로고침했을때 유저정보가 끊김에도 겟아이템이 작동 후
로그인으로 리다이렉트 돼서, 로그인 페이지에서도 스토어에 아이템 리스트가 남아 있는걸 발견!
=> 그럼 라이프 사이클에 조건을 추가하자
=> 유저 정보가 있을때만 작동하도록 조건문 추가
=> 따란~! 문제 해결!

useEffect(() => {
  //스토어에 유저아이디가 있을때만 아이템을 가져오도록 분기
   user_id && getItem(items);
  
  }, []);

 useEffect(() => {
   user_id && SumAllMonthly();
  }, [items_monthly]);

솔직히 위에서 그냥 서버와 연동하면 해결할 문제라 그냥 넘어가도 상관은 없었지만
붙잡고 해결해서 나름 뿌듯했다..이렇게 자기위안을...
하지만 팩트는 이건 내가 hooks의 미숙함과 스토어 관리가 꼼꼼하지 않아서 발생한 문제란거!
그래서 일단 useEffect에 대한 좀 더 명확한 사용법을 찾아보았다.
https://dawan0111.github.io/blog/react/react--exhaustive-deps/
이 글이 useEffect를 사용한 라이프 사이클 관리에 대해 정리가 잘 되어 있었다.
그리고 로그아웃시 전체 스토어를 비우는 로직을 추가로 작성

2.class => functional 리팩토링

기존에 회원가입과 로그인는 클래스 컴포넌트로 작성했었는데
스프린트 1 이후 리액트 훅스를 도입하면서
그 이후의 컴포넌트는 전부 함수형 컴포넌트? function component로
작성되었다. 그러나 회원가입과 로그인 둘다 굳이 클래스로 작성할 이유는 없겠다
싶어 페어분과 토의한 후 전부 함수형으로 리팩토링 했다 .

역시 어제도 느꼈지만 class로 statefull하게 만드는 것보다
hooks를 사용해 관리하는 게 더 깔끔한 것 같다 .
마찬가지로 Form의 인풋 값을 스테이트에 넘겨주긴 하지만.. 불필요한 this를
안써도 된다는 것에 기쁨을 느낀다 .
일일히 숏핸드로 줄여주는 것보다 간편하긴 하니까 !