React

리스트와 key

JuChan 2022. 4. 21. 19:45

React를 이용해서 리스트를 만들어 보자..

 

 

우선 React 기본세팅을 맞춰보자 - ReactDOM.render를 이용해서 <App /> 컴포넌트를 만들어보자

 

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

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

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

 

 

이제 List 컴포넌트를 만들어서 <App /> 컴포넌트 render 안에다가 넣어서 실행을 시켜보자.

 

그리고 state 객체 안에 리스트 배열을 하나 만들어보도록 하자

 

 // 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')
        )

 

 

state 객체에 넣은 board 배열을 다시 list 변수에다가 담은 것을 확인할 수 있다. 그리고 <li></li> 엘리먼트에 다시 넣음으로써 배열을 새로 만들었다. 

 

배열반복문은 여기서 쓰인 map 말고도 ( forEach, filter, reduce) 등이 있다는 것을 알고 있도록 하자. 

 

자 다시 <li> 엘리먼트에 넣은 배열로 반환한 것을 보도록 하자. 반환된 이것을 render에 <ul></ul>에 넣으면 리스트가 생성이 된다. 

 

이 때 리스트의 각 항목에 "key"를 넣어야 하는데 key는 엘리먼트 리스트를 만들 때 포함해야 하는 특수한 문자열 속성이다.  Key는 React가 어떤 항목을 변경, 추가 또는 삭제할지 식별하는 것을 돕습니다.

 

key는 엘리먼트에 안정적인 고유성을 부여하기 위해 배열 내부의 엘리먼트에 지정해야 합니다.

 

 

 

결과의 화면은 아래와 같다.