[React] 상세페이지 관련 에러

에러 발생

• 개인 과제 오픈마켓을 미리 만들어 보던 중 발생한 오류.
• 상품 디테일 페이지의 데이터를 불러와 jsx파일에 뿌려주는 도중 가격 부분에 대한 , 을 찍어주는 정규표현식을 넣어 만들어 줬는데 데이터를 불러오기 전에 변수에 값을 할당하니 undefined.price 가 되어 에러가 났다.

 

해결

• getPriceWon 함수를 만들어 넣어줬다. jsx 문법에 함수를 실행하는 게 별로라면 useMemo를 이용해 디펜던시를 productsData로 설정해주고 함수를 직접 할당해줄 수 있지만, 메모이제이션이 필요한 함수인가를 생각해보면 아니기에 함수 자체를 할당했다.
• useState내에 초기값을 { price: '' } 처럼 할당하는 것도 가능하다.

 

공부 필요한 부분

1. useEffect는 컴포넌트 마운트 후에 실행된다. 실행 순서 관련 공부하기.
2. useMemo, useCallback 의 차이점과 적용부위에 대해 확실히 알기.