CityList개발-handleLoadMore함수질문

한 번에 끝내는 자바스크립트: 바닐라 자바스크립트로 SPA 개발까지

CityList 개발

작성

코드 관련 질문은 아래와 같이 '코드블럭' 기능을 이용해주세요!
+ 오류 메세지도 함께 올려주시면 좋아요 🙂

안녕하세요 강의에 따라 그림이 로드 되는 것까지는 성공했지만 이후 handleLoadMore를 넣고 배열이 나오지 않아요...

그리고 handleLoadMore함수가 어떻게 실행까지 이어지는지 알려주세요

예) handleLoadMore가 new CityList의 인수로 지정되고 cityList 함수에 부여되어 00줄 console.log함수로 출력

추가한 코드만 넣었습니다...!

주석 단 부분으로 확인해보니

이렇게 작동됨은 확인했습니다!

 const cityList = new CityList({ $app, initialState: this.state.cities,
        handleLoadMore: async  () => {
            const newStartIdx = this.state.startIdx + 40;
            const newCities = await request(newStartIdx, this.state.region, this.state.sortBy, this.state.searchWord);
        }
    });

//console.log(cityList)

⚠ 답변은 평일 오전 10시에 순차적으로 작성해드립니다.
⚠ '질문 해결'은 답변 작성일 기준 1일 이후에 적용됩니다.

javascript rest-api spa dom

답변 1

효빈 Hyobin

지식공유자

안녕하세요 🙂 질문 감사합니다.

$loadMoreButton.addEventListener('click', () => {
    this.handleLoadMore();
});

handleLoadMore 함수는, 위의 코드처럼 CityList 컴포넌트가 렌더링 될 때 조건에 따라 나타나는 '더보기' 버튼을 눌렀을 때 실행되는 함수입니다.

CityList.js 파일에 해당 부분을 작성하셨는지 확인해보시면 좋을 것 같습니다!

전체 코드는 아래와 같습니다.

//CityList.js
export default function CityList({ $app, initialState, handleLoadMore }) {
    this.state = initialState;
    this.$target = document.createElement('div');
    this.$target.className = 'city-list';

    this.handleLoadMore = handleLoadMore;

    $app.appendChild(this.$target);

    this.template = () => {
        let temp = `<div class="city-items-container">`;
        if (this.state) {
            this.state.cities.forEach((elm) => {
                temp += `
                    <div class="city-item" id=${elm.id}>
                        <img src=${elm.image}></img>
                        <div class="city-item-info">${elm.city}, ${elm.country}</div>
                        <div class="city-item-score">⭐️ ${elm.total}</div>
                    </div>
               `;
            });
            temp += `</div>`;
        }
        return temp;
    };

    this.render = () => {
        this.$target.innerHTML = this.template();

        if (!this.state.isEnd) {
            const $loadMoreButton = document.createElement('button');
            $loadMoreButton.className = 'add-items-btn';
            $loadMoreButton.textContent = '+ 더보기';
            this.$target.appendChild($loadMoreButton);

            $loadMoreButton.addEventListener('click', () => {
                this.handleLoadMore();
            });
        }
    };

    this.setState = (newState) => {
        this.state = newState;
        this.render();
    };

    this.render();
}

김규태

질문자

감사합니다 선생님

다만, 제가 궁금하였던 부분은 14분 쯤부터 작성한 handleLoadMore함수를 작성하고 실행하였을 때 홈페이지에서 배열이 나오는 부분이였습니다.(첨부드린 사진 강의로는 14-15쯤 내용입니다!! )

선생님께서 이야기해주신 부분은

강의기준 18분 쯤 작성시작

//CityList.js
export default function CityList({ $app, initialState, handleLoadMore })
//CityList.js에 handleLoadMore를 export하는 부분

강의기준 19분 쯤 작성시작

$loadMoreButton.addEventListener('click', () => {
    this.handleLoadMore();
})

위 2가지 코드 모두 제가 이야기 드린 부분에서 지난 시점이라 제가 말씀드린 14분부터 작성을 시작하여 15분에 웹페이지에서 개발자도구를 통해 콘솔탭에서 확인한 배열이 안나오는 사유를 알고싶습니다.

효빈 Hyobin

지식공유자

console.log를 어느 위치에 작성하셨을까요??

제가 강의를 들어보니, "API 호출의 결괏값을 console.log를 통해 출력해보면, 알맞은 데이터가 담긴 배열이 출력된다" 라고 말하고 있는데 그 부분을 말씀하신게 맞으신가요?

해당 부분이 맞다면, api 호출의 결괏값을 출력한 것이기 때문에 api.js 파일에서 호출중인 함수의 반환값을 console.log를 사용해 출력해보시면 될 것 같습니다 🙂

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

CityList개발-handleLoadMore함수질문