Jquery map 메소드 사용해서 컴포넌트 반

<script>
        let Lists = [
            {
                number: 1,
                title: '바보',
                attach: '/img/이미지링크.png',
                writer: '정씨',
                date: '2022/02/24',
                views: 32,
            },
            {
                number: 2,
                title: '멍청이',
                attach: '/img/이미지링크.png',
                writer: '김씨',
                date: '2022/02/21',
                views: 33,
            },
            {
                number: 3,
                title: '똥개',
                attach: '/img/이미지링크.png',
                writer: '박씨',
                date: '2022/02/14',
                views: 23,
            },
            {
                number: 4,
                title: '말미잘',
                attach: '/img/이미지링크.png',
                writer: '홍씨',
                date: '2022/01/14',
                views: 78,
            },
        ];
        $(document).ready(() => {
            let List = $.map(List, (el) => {
                let { number, title, attach, writer, date, views } = el;
                return `<tr>
                    <td>${number}</td>
                    <td><a href="#">${title}</a></td>
                    <td><img alt="이미지" src="${attach}" /></td>
                    <td>${writer}</td>
                    <td>${date}</td>
                    <td>${views}</td>
                </tr>`;
            }).join('');

            $('table>tbody').html(Lists);
        });
    </script>
    
    

보는 바와 같이 List라는 변수에 map 메소드를 사용하여 ( Jquery에선 $.map(arr,function(value,index)의 형식으로 사용한다.)
아래의 html 코드들을 return 하였고 es6의 destructuring syntax를 사용하여 간결하게 코드를 작성함.

배열 상태의 List에 .join('') 메소드를 사용하여 문자열로 바꾸고 그 값을 html()메소드로 삽입한다.