CharacterImg
컴포넌트
props로 imgSrc
에 filePath
+ fileName
를 넣었을 때 3가지 상황 발생
Search
페이지의 Character
부분Search
페이지의 Content
부분, SettingsCharacter
페이지캐릭터 생성 시 이미지를 추가했을 때 생성 직후 바로 이미지가 불러와지지 않고 Error 발생 → 새로고침 하면 불러와지는 현상
위에는 filePath
+ fileName
으로 콘솔 찍히는데, 이걸 DB에서 찾을 수 없어서 발생하는 에러?
→ DB에 들어가 있는데도 발생함
밑으로 내려보면 Character.js
에서는 이런 Error가 콘솔에 찍힘(다른 시점이라 이미지 파일은 다른게 정상)
추가적으로 캐릭터 생성 과정에서 이런 콘솔 로그도 발견
1번, 2번, 3번 모두 imgSrc
= filePath
+ fileName
인데 0도 발견
현재까지 드는 생각
Search
에서 Character
부분이 정상적으로 동작했던 이유는 useEffect
의 deps
에 query
를 넣었기 때문인가? → query
를 넣은 이유는 다른 검색어가 입력될 때마다 다른 결과를 랜더링 하기 위함이었음filePath
+ fileName
을 정상적으로 가지고 있어도 못 찾는 이유를 모르겠다. → 서버에서 테스트해도 왜 못찾아오는걸까Characters.js
의 24번째 줄인 catch
에서 발생한 에러인 것 같은데, userSeq
를 통해 캐릭터 리스트를 가져오는 과정에서 파일을 찾을 수 없다???파일을 찾을 수 없을 때 에러를 띄우지 않고 기본 이미지로 먼저 랜더링 후 추후에 파일을 가져왔을 때 해당 파일을 랜더링 하는 방법 → 이런게 존재할까?
return
아래의 html을 랜더링하기 전에 return
위에 있는 함수를 먼저 실행하는 방법을 찾기 → 이런게 존재하나?
기본적으로 useEffect
도 랜더링 끝나고 무언가 하는 것
(참고) https://stackoverflow.com/questions/63711013/how-to-trigger-useeffects-before-render-in-react
2/14 해결
tempImgSrc
를 useState
를 통해 만들어서 API를 통해 데이터를 넘겨받고, 해당 데이터에서 직접적으로 setTempImgSrc
를 통해 변경해준 뒤 CharacterImg
컴포넌트에서 imgSrc
=tempImgSrc
를 해서 해결되긴 했지만, 원인은 모르겠음
(tempImgSrc
= res.data.filePath
+ res.data.fileName
형태)
(기존에는 imgSrc
=character.filePath
+ character.fileName
형태였고, 로그를 찍어봐도 정상적으로 string 형태의 주소가 나왔었음)