오예예
144
2021-05-21 16:38:17 작성 2021-05-21 16:58:18 수정됨
5
218

js class안의 함수 값을 다른 함수에 보내고 싶습니다 ㅠㅠㅠ


안녕하세요 선배님 다름이 아니라 react로 작업한 것을 코드 정리하고 있는 과정 중에 해결이 안 돼서 글을 올립니다..


제가 해결을 못하는 것은 

타 경로에 있는 firestore.js의 class 안에 있는 함수 값을 페이지가 구동되는 함수 안에 값을 전달하고 싶습니다

( = ClothesShow.weather()의 값을 타 파일의 clothesList 함수에 전달 )


제가 구현한 건 이렇습니다.


import {fireStore} from '../service/firebase';

class ClothesShow {

    weather(temp) {
        const aa = fireStore.collection(`${temp}`);
        aa.get().then((snapshot) => {
            snapshot.docs.forEach(doc => {
                const obj = {
                    ...doc.data(),
                    id:doc.id,
                }
                return obj
            })
        })
    }

}

export default ClothesShow;

결론적으로는 저 변수 obj의 객체를 타 파일의 clothesList에 전달받고 출력하고 싶습니다


const cloth = new ClothesShow();

const clothesList = async(temp) => {
        const tempWeather = cloth.weather(temp) 
        console.log(tempWeather);
        
    }

며칠 째 이 부분만 잡고 있습니다 ㅜㅜㅜ promise랑 obj 반환하는 것도 찾아보고 영상도 보고 했는데 너무 해결이 안 돼서 글 올립니다 !







0
  • 답변 5

  • 1005hoon
    771
    2021-05-21 16:59:18 작성 2021-05-21 17:00:05 수정됨
    정확한 데이터들이 없어서 그냥 코드보고 대강 했는데, 이런식으로 하면
    결과값이 나오지 않을까요!?

    class ClothesShow {
    async getWeather(temp) {
    const aa = fireStore.collection(`${temp}`);
    const snapshots = await aa.get()
    const result = snapshots.map(doc => ({
    ...doc.data(),
    id: doc.id
    }))
    return result
    }
    }


    const cloth = new ClothesShow();
    const clothesList = temp => {
    const tempWeather = cloth.getWeather(temp);
    console.log(tempWeather);
    }
  • 오예예
    144
    2021-05-21 17:10:42
    와 응용해서 작성했더니 해결했습니다!! 방금 해결돼서 너무 소름돋았어요 ㅠㅠㅠㅠㅠㅠ 후 드디어 ㅠㅠ 정말 감사합니다!! 
  • 1005hoon
    771
    2021-05-21 17:23:41

    기존 코드에는 두가지 문제점이 있었습니다.

    첫번째로는, forEach 함수에는 리턴값이 '절대로' 없습니다! 

    const result = data.forEach( 이 안에 어떤 로직을 넣어도 )

    console.log(result) // undefined가 나옵니다


    따라서 데이터를 루프 돌면서 내가 원하는 모양의 array 로 반환하고 싶은 경우, map 함수를 사용하세요


    두번째로는, .then을 사용할때의 문제? 헷갈리는점이기도 한데,

    .then을 쓰면 내가 지금 작업하고 있는 코드가 어디 코드블락인지 파악하기가 어려워요


    class ClothesShow {
    //함수를 실행시키면
    weather(temp) {
    const aa = fireStore.collection(`${temp}`);
    //비동기 처리를 .then으로 하죠
    aa.get().then((snapshot) => {
    //.then 안에서 forEach로 루프를 돌려서
    snapshot.docs.forEach((doc) => {
    const obj = {
    ...doc.data(),
    id: doc.id,
    };
    //원하는 모양의 데이터를 리턴해줘요
    return obj;
    });

    // 근데 forEach에서만 리턴했지,
    // .then함수에서는 리턴하지 않았죠?
    });
    // 그래서 weather 함수에서 aa.get().then() 해서 꺼내온 값이
    // 이곳에는 존재하지도 않고, 리턴되지도 않습니다
    // 따라서 외부에서 cloth.weather()을 아무리 외쳐도
    // 아무 리턴값이 없으니 undefiend만 출력되는거죠.
    }
    }

     

  • 오예예
    144
    2021-05-21 18:02:14 작성 2021-05-21 18:07:38 수정됨

    정말 감사합니다!! 코드를 검사해줄 분이 없어서 내가 작성한 게 좋은 코드인지 아닌지 구별하기 어렵더라구요 ㅜㅠㅠㅠ 

    덕분에 더 참고하고 배우겠습니다 감사합니다!


    ps. 틀린 부분과 해설까지 적어주셔서 이해가 덜 된 부분이 해결 되었습니다 ! 정말 감사합니다!!

  • 1005hoon
    771
    2021-05-21 18:13:22

    화이팅입니다!

  • 로그인을 하시면 답변을 등록할 수 있습니다.