let newImages 및 splice() 질문 + 삭제질문

따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기[전체 리뉴얼]

이미지 지우기[삭제 예정]

작성

161

선생님 안녕하세요, new images에 질문이 있습니다~

 let newImages = [...images];
 newImages.splice(currentIdx, 1);
 setImages(newImages);

선생님이 써 주신 상단의 원래코드에서

let newImages = [...images].splice(currentIdx, 1);
 setImages(newImages);

이렇게 줄일 수 있지 않을까 싶어 저렇게 코드를 짰더니
반대로 클릭한 것만 남고 나머지가 사라지더라구요.

찾아보니까 splice()를 하면 삭제한 값이 return되는 것 같은데,
리턴한 값으로(=즉 내가 클릭한 인덱스) images가 새롭게 정의되어서 그런게 맞나요???

그렇다면 원래 코드와의 차이는 미리 선언을 하고 이후에 splice()를 하느냐 아니냐인 것인데, 선언을 먼저한 배열은 리턴 값이 아닌, 이미 선언되었던 배열이라 splice로 삭제된 값만 남고, 리턴 값은 그대로 리턴이 되는건가요?..

정리하자면

1. 배열 선언 먼저 -> 선언된 배열에서 splice함 -> 삭제한 idx제외하고 배열에 남음 -> 배열은 배열대로 남아있고 삭제한 값은 리턴으로 출력할수잇음(?)

2. 배열 선언과 splice 동시 -> 배열을 splice한 return값이 배열로 선언됨 -> 나머지값은 그냥 없어짐(?)..

이게 맞나요....????

대충 감은 알겠지만 확실한 차이를 잘 몰라서 질문드립니다 ㅜ... 제 질문을 부디 이해하셨으면 ....!

참고용으로 테스트했던 콘솔이미지 첨부드려요!

2. 추가질문

 images.splice(currentIdx, 1);
 setImages([...images]);

이렇게도 시도해봤는데 원래 코드와 똑같이 동작하더라구요.
newImages 배열을 새로 만들어 사용하는 이유는 원본은 그대로 두고 객체(?)처럼 쓰려고 하신게 맞는건가요??

밑에 다른 분 질문에서 서버 사진 삭제관한 질문인데요

-----------

파일 삭제는
노드 부분에서

const fs = require('fs') const path = 'yourPath(경로)' try { fs.unlinkSync(path) } catch(err) { console.error(err) }

----------

이렇게 답변 주셨었는데 노드부분은 혹 production.js를 말하는건가요?
좀 더 자세히 알려주시면 감사드리겠습니다.. :)

답변 기다리겠습니다~ 고맙습니다!~!

splice redux react mongodb 웹앱 nodejs

답변 1

John Ahn

지식공유자

안녕하세요 !!
좋은 질문 감사합니다 !

1. splice를 해서 리턴값은 지워진 값을 리턴하며, 저희는 지워진 값이 아닌 남아있는 값을 가져야하기 때문에 따로 해주셔야 합니다 !!

2. 리액트 state는 불변성을 지켜줘야하는데 이부분은
제가 길게 설명하는것보다 어떤 블로그에 너무 잘나와있어서 그 링크를 걸어두겠습니다 !!
https://hsp0418.tistory.com/171

3. 노드 부분은 client 폴더와 server 폴더 부분에서 server 폴더 부분을 얘기합니다. production.js는 익스프레스 서버가 운영환경에서 실행될 때 사용되는 부분입니다. 감사합니다 !!!

문수윤

질문자

선생님 답변감사합니다!!!!

그런데 추가로 질문이 있습니다!~!

3번째 질문으로 드렸던 노드 파일삭제를 거의 3~4시간째 시도하고 있는데요..
구글링해서 이리저리 방법을 시도해봐도 안되네요...
axios에 대한 이해가 부족해서 그런것같긴한데 ㅜㅠ...

일단 대충 틀은 클릭시에 서버 데이터 삭제까지 일어나야 하니까
FileUpload.js에서 onDelet 함수 맨 마지막에
(product body 데이터 넣을때처럼) axios를 추가하고,
product.js에 route를 추가했는데요.

//client/src/components/utils/FileUpload.js

const onDelete = (img) => {
        const currentIdx = images.indexOf(img);
        // console.log(currentIdx); // 현재 클릭한 index를 알 수있다.
        let newImages = [...images];
        const delImage = newImages.splice(currentIdx, 1);

        // **************** 서버 파일 삭제
        axios
            .post("/api/product/delete", { path: delImage })
            .then((res) => {

                // **************** 부모 컴포넌트로 전달
                setImages(newImages);
                props.refreshFunction(newImages);

                if (res.data.success) {
                    console.log("삭제완료");
                } else {
                    alert("failed");
                }
            });
};

// /server/routes/product.js

router.post("/delete", (req, res) => {
    //     const fs = require("fs");
    //     // 동기 방식으로 파일 삭제
    //     fs.unlinkSync(`/${req.path}`, (err) => {
    //         if (err) throw err;
    //         console.log("success del");
    //     });
});

이 코드로 하면 이 에러가 납니당...

지금 뒤에 강의들 들으면서 다시 저 코드보면 말이 안돼서 오류날수밖에 없는것같긴해요..^^..
splice() 리턴값으로 클릭한 파일 경로를 넣어주고
그걸 delete route에서 fs.unlink 해주는 방식으로 하고 싶었는데...어떻게 하면 될까요 ... ?

오기가 생겨서 꼭 성공하고 싶어요 ㅜ

인프런 커뮤니티 질문&답변

let newImages 및 splice() 질문 + 삭제질문