리액트 랜더링 및 파일 전송 방식 관련 질문 드립니다.

Question

안녕하세요. 클릭해 주셔서 감사합니다.채팅방 내에서 채팅 라인을 보여주고 있는 기능을 구현하고 있는데.. 이 과정에서 궁금한 부분이 생겨서 질문드립니다.먼저 구현은 서버로 부터 받은 데이터를 useState로 관리하며 map으로 순회하면서 태그에서 한 말풍선씩 그리고 있습니다.만약 라인에 글자가 아닌 서버로 부터 이미지를 받아와서 표현해야한다면 어떻게 작업하는 것이 최적의 방법일까요?map으로 순회하면서 그리다가 이미지를 그려야 할 차례가 되면 -> 해당 부분에서 chatContent에 이미지를 표현하기 위한 base64가 들어갑니다. imageLoad 함수로 base64 데이터를 받아와서 해당 chatContent에 저장하여 setState 합니다. 다만 이렇게 되면 문제점이 파일을 받아 올때마다 채팅 전체의 map을 다시 순회하면 그리는 것 같아 랜더링이 빈번하게 일어나는 것이 성능에 영향을 줄 수 있을거 같다는 생각이듭니다.채팅 라인 데이터를 조회할 때 부터 서버로 부터 조회하는 라인이 20개라고 하면 20개에 대한 파일 데이터(base64)를 함께 받아오는 방법 -> 이 방법은 페이징 처리하여 한 페이지를 받아올때만 한번의 랜더링이 필요하지만 20개의 라인에 모두 파일데이터가 있는 경우에 서버에 부하를 주는 것이 아닌가.. 라는 생각이드네요..그리고 한가지 더 여쭤보고 싶은 것은 리액트에서 이미지 파일을 보여주기 위해서 서버(스프링 부트로 짜여짐)로부터 base64 데이터를 받는것 말고 좀 더 세련된 방법이 있는지 궁금해서 여쭤봅니다.질문 드릴 내용은 위와같습니다. 감사합니다.

Clickin · Answer

좋은 <img> 태그 두고 굳이 이미지 자체를 받아와야할까요?서버에서도 이미지를 byte[]나 파일 자체로 돌려주는 방식으로 구현하시는 게 난이도가 낮으므로 아마 이쪽으로 진행하실텐데, 그러면 img 태그에다가 src 로 해당 url을 지정해주는 게 가장 쉽고 빠릅니다.img 태그는 CORS 예외사항이기 때문에 CORS 걱정도 없습니다.

리액트 랜더링 및 파일 전송 방식 관련 질문 드립니다.

1개의 답변

Q&A 목록