[자바스크립트] - 페이지 리렌더링 하기

1. 개요

졸업작품을 하던 중 버튼을 누르면 페이지가 이동하지 않고 원하는 요소만 바뀌도록 구현하고 싶었다. 페이지 이동을 하면 번거롭고 시간도 오래 걸릴거 같아서 이 참에 리렌더링하는 방법을 배워보자 라고 생각했다.ㅎㅎ

아마 대부분 리액트에서 많이 쓰지만 나는 졸업작품을 VanillaJS로 하고 있기 때문에 자바스크립트로 구현을 해볼 것이다.

2. 리렌더링이란?

초기에 한번 렌더링을 진행하고, 그 이후에 특정 조건이 발생하면 다시 렌더링을 진행하는 경우를 말한다.

 

3. 리렌더링 과정

1) 버튼 요소를 불러와서 클릭했을 때 이벤트를 걸어준다.

const find = document.querySelector(".find");	// 버튼요소
find.addEventListener("click",function(){

})

2) 원하는 부분에 이미 렌더링된 부분을 없애준다.

Store_Zone.innerHTML="";

3) 그리고 다시 만들어준다.

stores.innerHTML = `<div class="Sign">
              <div class="Store_Sign">
                <div class="Store_Image"></div>
                <div class="Store_Name">
                  <h4 class="Store_Title">"${adminCafe}"</h4>
                  <p class="detail">"${intro}"</p>
                  <div class="rating">
                    <span class="Star">⭐</span>
                    <span class="Star_Rating">4.5</span>
                    <span class="Review_Rating">(412)</span>
                  </div>
                  <span class="tags">연어 및 각종 일식</span><br>
                  <span class="address">"${addr}"</span>
                </div>
              </div>
            </div>`;
Store_Zone.appendChild(stores);

4. 완성된 코드

find.addEventListener("click",function(){
        Store_Zone.innerHTML="";
        for(let i=0;i<data.length;i++){
            let adminCafe = data[i].adminCafe;
            let intro = data[i].storeIntroduce;
            let addr = data[i].addressName;
            let adminNo = data[i].adminNo;
            let stores = document.createElement("div");
            stores.setAttribute("class","store");
            //stores.setAttribute("value",i+1);
            stores.innerHTML = `<div class="Sign">
              <div class="Store_Sign">
                <div class="Store_Image"></div>
                <div class="Store_Name">
                  <h4 class="Store_Title">"${adminCafe}"</h4>
                  <p class="detail">"${intro}"</p>
                  <div class="rating">
                    <span class="Star">⭐</span>
                    <span class="Star_Rating">4.5</span>
                    <span class="Review_Rating">(412)</span>
                  </div>
                  <span class="tags">연어 및 각종 일식</span><br>
                  <span class="address">"${addr}"</span>
                </div>
              </div>
            </div>`;
            stores.onclick = function(event){
              sessionStorage.setItem("selectedValue", adminNo);
              window.location.href="/JoJinHyeong/Store_info/store.html";
            };
            Store_Zone.appendChild(stores);
          }
    })

---

이 방법으로 하는게 맞는지 아닌지 모르겠다. 구글링을 해봐도 VanillaJS로 리렌더링을 하는 방법을 잘 나와있지 않아서 현재는 이렇게 알아두고 나중에 다시 개념이 정리되면 수정하도록 하겠다. 

🧡 피드벡 주시면 감사합니다!