[220414] 리스트로 DB 데이터를 다루는 방법

<div id="root"></div>
<script type="text/babel">

    //SELECT query를 날리면 데이터타입은? Array
    //프론트에서 배열로 받으면 화면을 어떻게 꾸몄죠?
    //배열을 반복해서 해당 객체내용을 뽑아온 다음, 정해진 템플릿을 활용해 데이터를 바꿔서 껴넣었다.

    //List 컴포넌트
    class List extends React.Component{
        state = {
            board : [
                        {id:1, subject:'ingoo'},
                        {id:2, subject:'ingoo'},
                        {id:3, subject:'ingoo'},
                        {id:4, subject:'ingoo'}
                    ] //DB통신해서 결과물을 받은 객체라고하자
        }

        //Array 반복문 forEach, filter, map, reduce
        list = this.state.board.map((v,k)=>{
            return(
                <li key={k}>
                    <span>{v.id}</span>
                    <span>{v.subject}</span>
                </li>
            )
        })//Array

        render(){
            return(
                <ul>
                    {this.list}
                </ul>
            )
        }
    }

    class App extends React.Component{
        render(){
            return(
                <div>
                    <List />
                </div>
            )
        }
    }

    ReactDOM.render(
        <App />
        ,document.querySelector('#root')
    )
</script>