JavaScript push를 이용해서 렌더링하기.

<ul>
    <li><a href="#">API 1</a><li>
    <li><a href="#">API 2</a><li>
    <li><a href="#">API 3</a><li>
    <li><a href="#">API 4</a><li>
</ul>

특정 API 호출시 API 1 ~ API 4 까지를 반환하고 이값을 ul > li > a 로 렌더링 할려고한다. 

React를 사용할 수도 있지만 JavaScript만으로 구현을 한다고하면 대부분은 아래와 같은 과정을 지나갑니다.

 

const ul = documnet.createElement('ul');

// API 호출함수 ["API 1", "API 2", "API 3", "API 4"] 반환
const API = getAPI(URL);

for(let i =0; i< 4; i++) {
    const li = document.createElement('li');
    const a = document.createElemen('a');
    
    a.href = `#${API[i]}`;
    
    li.appendChild(a);
    ul.appendChild(li);
}

document.getElementById('root').appendChild(ul);

 

물론 위와 같은 방법도 사용하지만 이번에는 push 함수와 innerHTML로 작성해보자.

 

const list = []; javaScript에서는 배열을 나타낸다. 이때 list 내장함수로 push가 있는데 LinkedList 성질처럼 뒤쪽으로 FIFO형태로 적재된다.

const ul = documnet.createElement('ul');

// API 호출함수 ["API 1", "API 2", "API 3", "API 4"] 반환
const API = getAPI(URL);
const list = [];
list.push('<ul>');

for(let i =0; i< 4; i++) {
        newsList.push(`
        <li>
        <a href="#${API[i]}")</a>
        </li>
        `);
}
list.push('</ul>');

document.getElementById('root').innerHTML = list.join('');

이런식으로 push를 이용하고 innerHTML과 join을 이용해서 코드를 바꿀수 있다.

 

join 같은 경우는 파라미터를 넣지않으면 배열들을 ',' 로 합쳐서 보여주고 파라미터가 들어가면 배열과 배열사이에 파라미터값으로 대치한다. 공백을 넣었기 때문에 innerHTML에는 스트링문자열이 자연스럽게 들어가고 렌더링될 때 원하는 결과를 가져온다.