[TIL] 원티드 프리온보딩_11일차_220513

이강윤·2022년 5월 13일
2

TIL

목록 보기
10/30
post-thumbnail

👏useEffect vs useUpdateEffect [custom Hook]

나는 A라는 state가 변경되었을 때 Test 라는 함수를 실행시키고자 했다.
그래서 좀 더 익숙했던 useEffect Hook을 이용해서 로직을 구현하였다. 하지만 다시 mount를 하게 되면 useEffect 가 실행되고 원치 않는 Test함수가 실행이 되는 문제를 발견했다..
Test라는 함수는 api를 요청하는 로직이 담겨있었는데 그러다보니 원치 않는 api요청이 가고 있었다..(끔찍..) 실제로 사용되는 app이었다면 정말 큰 문제를 일으킬 수 있는 것이다.😣
그래서 다른 hook 은 없을까 하고 찾아보다가 useUpdateEffect를 발견하였고 해당 Hook으로 문제를 해결했다..!
그리고 여전히 비동기는 어렵고 어렵다..🥶🥶

useUpdateEffect

  • useEffect와는 유사하지만 마운트시에는 실행되지 않으며 useEffect와 같이 특정 state가 변경될 때 사용하기 유용하다.
  1. react-use 설치
    npm i react-use
  2. 사용법
useUpdateEffect(() => {
	...

},[...deps])

github 내 잔디 돌려내 😣

분명 열심히 공부하고 커밋했는데 잔디가 심어지지 않았다.. 초록 잔디로 '나 이만큼 했어~!'라는 마음으로 뿌듯함을 얻고싶었는데 괜히 조금 그랬다 ㅋㅋ ㅜㅜ
그래서 검색을 해보니 아래와 같은 사항인 경우에만 잔디가 심어진다고 한다..

  1. Github계정과 commit이메일 계정이 동일한 경우
  2. commit한 repository는 fork한 것이 아닌 나의 repository일 경우

내가 둘다 해당되지 않고 있었다..ㅋㅋ....바보..
소스트리를 통해서 git을 관리하고 있었는데 커밋하는 이메일 계정이 달랐던 것이다..으악 바로 소스트리 계정 수정하고 리드미만 바꿔서 테스트 커밋을 해봤더니 바로 잔디가 심어졌다.. 흐흐 열심히 심어야지 🧶


마무리..

오늘은 UI도 다 수정하고 infinite scroll 오류도 다 잡았다 ..
즐겨찾기 여부 확인하는거는 아직 못했지만 그래도 내일부터 다시 화이팅 해보면 풀리지 않을까?! 싶다 ㅜㅜ
내일은 그 부분 수정하고, readme도 수정할 예정이다! 내일도 화이팅이다..💨

profile
멋진 FE개발자가 될거야 ✌

2개의 댓글

comment-user-thumbnail
2022년 5월 16일

안녕하세요? useEffect 훅으로 받아온 데이터를 로컬캐싱해서 사용하는 방법 중 더 나은 방법도 많을 것 같습니다. useEffectUpdate을 사용하는 것도 좋지만 서버 스테이트의 개념을 이용해서 로컬 캐싱을 보다 효율적으로 구현해주는 reactQuery나 useSwr을 학습해보세요.

1개의 답글