1. 문제상황.

  1. 카드 추가 페이지에서 카드를 추가함.
  2. react-query mutation을 통해서, 기존체 getSearchCard를 통해서 가져온 데이터를 방금 추가한 카드에 맞게 수정해줬음.
  3. 다시 리렌더링을 했을 때, 아래와 같은 3종류의 에러가 console.log 창에 띄워짐
Warning: Prop `src` did not match. Server: "<https://moicbucket.s3.ap-northeast-2.amazonaws.com/image/card/5c3d8a55-58f7-11ee-bc1a-0242ac110003.png>" Client: "<https://moicbucket.s3.ap-northeast-2.amazonaws.com/image/card/5c3d8aae-58f7-11ee-bc1a-0242ac110003.png>"

Text content does not match server-rendered HTML.

Error: There was an error while hydrating this Suspense boundary. Switched to client rendering.
  1. 또한, 동작을 자세히 보면…
    1. 맨 처음 getSearchCard를 통해 보였을 페이지가 먼저 보임.
    2. 다음으로, 1초 후에 최근 등록을 통해 수정한 카드 리스트들로 제대로 나오는 페이지로 보임.

2. 무엇 때문에 발생한 것인가?

개발자 도구 console.log 에서의 cardList

Untitled

terminal 내에 찍힌 cardList

{
	id: '5c3d8b70-58f7-11ee-bc1a-0242ac110003',
	company: '하나',
	type: '신용',
	name: 'MULTI Any 모바일카드',
	cardImage: '[<https://moicbucket.s3.ap-northeast-2.amazonaws.com/image/card/5c3d8b70-58f7-11ee-bc1a-0242ac110003.png>](<https://moicbucket.s3.ap-northeast-2.amazonaws.com/image/card/5c3d8b70-58f7-11ee-bc1a-0242ac110003.png>)',
	mine: false
},