반응형

 

 

이번 포스팅에서는 React를 사용해서 리스트를 만들어보고자 한다.

우선 ReactDOM.render( )를 이용해 랜더링 할 <App /> component를 다음과 같이 만들어 놓고 시작하도록 하자.

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script crossorigin src="https://unpkg.com/react@17/umd/react.production.min.js"></script>
    <script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js"></script>
    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
</head>

<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>

 

이제 랜더할 리스트 component를 만들어서 <App/> component 안에 집어 넣기만 하면 된다. 원래는 게시글 리스트 같은 것을 만들 때 데이터베이스와 통신해서 그 결과물을 가져와야 하지만 배열 형태의 더미 데이터를 state 객체 안에 담아놓고 리스트를 만들어 보도록 하겠다. 

<script type="text/babel">
    
    // List 컴포넌트
    class List extends React.Component {

        state = {
            board: [
                {id: 1, subject: 'first'},
                {id: 2, subject: 'second'},
                {id: 3, subject: 'third'},
                {id: 4, subject: 'fourth'}
            ]  // 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>
            )
        })

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

짚고 넘어가야할 포인트는 map 함수와 JSX 문법을 이용해 배열에 담긴 데이터를 <li></li> 엘리먼트 안에 넣어서 다시 배열로 만들었다는 것이다. 그렇게 반환된 배열을 <ul></ul> 안에 집어넣기만 하면 리스트가 만들어진다. 이 때 리스트의 각 항목에 "key"를 넣어야 하는데 key는 엘리먼트 리스트를 만들 때 포함해야 하는 특수한 문자열 속성이다. 

 

key는 React가 어떤 항목을 변경, 추가 또는 삭제할지 식별하는 것을 돕는다. key 값은 리스트의 다른 항목들 사이에서 해당 항목을 고유하게 식별할 수 있는 문자열을 사용하는 것이 좋다. 대부분의 경우 데이터의 ID를 key로 사용하지만 랜더링 한 항목에 대해 안정적인 ID가 없다면 항목의 인덱스를 key로 사용할 수도 있다.

 

완성된 코드는 다음과 같다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script crossorigin src="https://unpkg.com/react@17/umd/react.production.min.js"></script>
    <script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js"></script>
    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
</head>

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

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

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

        class App extends React.Component {
            render() {
                return(
                    <div>
                        <List />
                    </div>
                )
            }
        }
        
        ReactDOM.render(
            <App />,
            document.querySelector('#root')
        )

    </script>
</body>
</html>

 

 

 

 

 

반응형

'React' 카테고리의 다른 글

React - webpack.config.js  (0) 2022.04.20
React - Webpack  (0) 2022.04.18
React - State 끌어올리기  (0) 2022.04.17
React - Props & State  (0) 2022.04.14
React 기본 개념  (0) 2022.04.12

티스토리툴바