rendering 유틸 함수 사용법

[vHwav]

랜더링 함수의 구조

자바스크립트 코드

//현재 로그인한 유저id

const userRecords = await pb.collection('users').getFullList();
const userValid = await getStorage('userId');
let userNow = userRecords.find((item) => item.id === userValid);

//랜더링 함수
function rendering(className, obj){
    const renderBoxs = Array.from(getNodes(className))
    renderBoxs.forEach((item)=>{
      let keyName = item.dataset.field
      try {if(obj[keyName] !==''){
        item.textContent = obj[keyName]
      }
    }catch{
      throw new Error('rendering 함수의 인수는 문자 타입이어야 합니다, 두번째 인수는 객체여야 합니다')
    }
    })
  }

//랜더링 함수 설정
rendering('.rendering-box',userNow)

rendering 함수의 첫번째 인수 값으로는 html 코드에서 랜더링 하고 싶은 element의 클래스명이 string 타입으로 들어갑니다
두 번째 인수 값으로는 랜더링 하고 싶은 collection의 객체 값이 들어갑니다.

위의 예시 대로라면 저는 .rendering-box 라는 클래스 명을 가진 p 태그 안에 userNow라는 users collection의 객체를 넣을 예정이 되겠네요

html 코드

<div class="">
    <p data-field="username" class="rendering-box  profile-text-Privacy text-lg font-semibold"></p>
    <p data-field="company" class="rendering-box text-sm text-secondary inline-block border border-secondary rounded-full px-1" >
          미등록
     </p>
</div>

하지만 랜더링 할 때 객체를 통으로 넣을 수는 없으니 key 값을 찾아주기 위해 html 태그의 dataset 을 활용합니다. data-field="원하는 키 값" 을 element 안에 넣어주면 rendering 함수의 객체에서 value를 골라낼 수 있습니다.
또한 rendering 함수를 이용하면 userNow 객체의 value 값이 비어 있을 때, html 의 element에 원래 써져 있는 text(여기서는 미등록) 값이 출력됩니다.

어떨 때 쓰면 좋을까?

이 페이지에서 랜더링이 되어야 하는 부분은 노란 형광색이 그어져 있습니다
이 부분을 채우기 위해 전체 페이지를 js안에 넣는 건 코드 상으로도 너무 지저분해 보이는 데다가 user가 등록하지 않은 영역의 값들을 사용자에게 알려주려면 랜더링 후에 또 다시 js 를 등록 해야 하는 번거로움이 있습니다.

이럴 때 노란색 영역 부분을 span 태그나 div로 처리 한 후 클래스 명과 data-field="" 설정해주면 편하고 깔끔한 코드가 될 수 있습니다

혹시 문제가 있거나, 궁금하신 부분은 말씀 주세요