목차

update

업데이트 페이지는 PostUpload와 굉장히 유사하다. 하지만 요청이다르다. Create부분을 보지 않았다면 Create 부분을 먼저 봐야한다.

게시글을 클릭하여 수정 버튼을 눌렀을 때 나오는 화면이다. 수정하기 전인 데이터가 그대로 들어가 있는 것을 알 수 있다.

// src/components/postupdate

const onSubmit = async data => {
    try {
      const { postText } = data;
      const joinFilename = uploadPostImage && uploadPostImage.join();
      dispatch(updatePost(postText, joinFilename, postId));
    } catch (e) {
      console.log(e);
    }
  };

역시나 onSubmit 이라는 제출 핸들러를 통해서 data를 받아온다. 하지만 이전과 차이점이 있다면 바로 joinFilename을 하여 파일을 이어준다는 것이다

joinFilename은 왜 필요한가?

왜 파일들을 문자열을 합쳐주는 joinFilename이 필요할까? 우리는 분명 Create를 통해서 파일을 보낼때

// src/components/PostUpload/index.jsx

const image = await multipleImageUploadsHandler(fileDatas);

// src/util/multipleImageUploads.js

for (let i = 0; i < filenames.length; i++) {
    if (i === 0) {
      joinFilename = filenames[i];
    }
    if (i > 0) {
      joinFilename = joinFilename + "," + filenames[i];
    }
  }

multipleImageUploadsHandler 함수를 통해서 이미지를 전처리 해주었고 그 결과 이어진 문자열을 만들었다. 근데 왜 다시 이어지는 문자열을 만들어 줘야할까 ?

Array.prototype.join() - JavaScript | MDN

게시물에 저장된 이미지들은 split 되었다.

// src/components/profile/GalleryContainer/index.jsx
posts.map(post => {
	const postImages = post?.image?.split(",");
				return (
              <PostCard
								...
                postImages={postImages}
		            ...
              />
            );
          })

우리는 gallertContainer에서 useSelector를 통해서 데이터를 불러온다. 그때 이미지들은 문자열로 이어져있다.

우리는 문자열로 이어진 이미지를

	const postImages = post?.image?.split(",");