치춘짱베리굿나이스

[프리온보딩] 220513 개인과제 #1 본문

프로젝트/원티드 프리온보딩

[프리온보딩] 220513 개인과제 #1

치춘 2022. 5. 14. 01:53

개인과제 #1

공식적인 내생각

코드를 짜다 보니 Suspense를 단단히 잘못 알고 있는 듯한 느낌이 들어서 (실제로도 잘못 쓰고 있었던게 맞았다) Suspense 관련해서 자료를 정리하고, 또 Suspense 관련 자료를 검색하다 보니 비동기 처리랑 Promise 관련해서 자료 정리하고...

공부할 게 끝이 없다

작업 내용 (삽질 오브 삽질)

자꾸 로컬 스토리지 값이 초기화되던 문제

useEffect(() => {
    store.set('storageData', favoriteData);
  }, [favoriteData]);

이 코드가 문제였다

storageDataFavoritePage에 들어올 때마다 값이 initialData로 초기화되는데, favoriteData가 변경되었으니 당연히 저 useEffect가 실행될테고 그래서 자꾸 값이 초기화되는 것이었다

useEffect로 컴포넌트 마운트 시에 데이터를 불러오지 말고 아예 favoriteData 초기화 단계에서 스토리지 값을 갖고오는 게 낫겠다

고쳐야 할 문제들

  • favoriteData가 갱신되는 타이밍과 로컬스토리지에 값이 들어가는 타이밍이 한 발씩 늦다
  • 아직 좋아요 데이터 삭제가 안된다 ㅡ,,ㅡ; 모달 창 띄우면서 수정해야한다
  • Suspense 써서 리팩토링 하고 싶은데 일단 지금 상태로도 로딩이 안 뜰 뿐이지 데이터 fetching은 잘 되니 후순위로 미루려 한다

오늘 정리한 내용

데이터 불러오기, Suspense

데이터 불러오기, Suspense

 

데이터 불러오기, Suspense

컴포넌트의 데이터 Fetching & Rendering 크게 세 가지 방법이 있으며, 각각 수행 방법과 시간에 차이가 있다 fetch-on-render (렌더링 직후 불러오기) useEffect(() => { fetchData(); }, []); // Mount될 때 데..

blog.chichoon.com

비동기 처리와 Promise

비동기 처리, Promise

 

비동기 처리와 Promise

비동기 처리와 Promise 동기 (Synchronous) 와 비동기 (Asynchronous) const [testValue, setTestValue] = useState(0); const handleOnClick = () => { setTestValue(testValue + 1); setTestValue(testValue + 1..

blog.chichoon.com

 

Comments