[구름EDU|처음만난React#8] List and Key

---

본 게시글은 구름EDU 처음 만난 React 온라인강의를 시청한 후 학습한 정보를 기록하는 목적의 게시글입니다.

생각의 흐름에 따라 작성된 게시글입니다. 가독성이 떨어질 수 있습니다.

처음 만난 React

처음 만난 React(리액트) - 구름EDU

구름 EDU

구름EDU - 모두를 위한 맞춤형 IT교육

---

List

> 목록 = Array

> JavaScript의 변수나 객체들을 하나의 변수로 묶어놓은 것

const numbers = [1, 2, 3, 4, 5];

> React에서는 Array를 사용하여 다수의 Element를 렌더링 할 수 있다

 Example

const numbers = [1, 2, 3, 4, 5];

 

const listItems = numbers.map((number) =>

    <li>{number}</li>

);

 

ReactDOM.render(

    <ul>{listItems}</ul>,

    document.getElementById('root')

);

Result

ReactDOM.render(

    <ul>

        <li>{1}</li>

        <li>{2}</li>

        <li>{3}</li>

        <li>{4}</li>

        <li>{5}</li>

    </ul>

    document.getElementById('root')

);

Component화

function NumerList(props){

    const numbers = props.number;

    const listItems = numbers.map((number) =>

        <li>{number}</li>

    );

    return(

        <ul>{listItems}</ul>

    );

}

 

const numbers = [1,2,3,4,5];

ReactDOM.render(

    <NumerList numbers={numbers}/>,

    document.getElementById('root')

);

 

Key

> 아이템들을 구분하기 위한 고유한 문자열

> key의 값은 해당 Element사이에서만 고유한 값이면 된다.

//key로 값을 사용하는 경우

const numbers = [1,2,3,4,5];

const listItems = numbers.map((number)=>

    <li key={number.toString()}>

        {number}

    </li>

);

 

//key로 객체의 ID를 사용하는 경우

const todoItems = todos.map((todo)=>

    <li key={todo.id}>

        {todo.text}

    </li>

);

 

//key로 index를 사용하는 경우

const todoItems2 = todos2.map((todo, index)=>

    <li key={index}>

        {todo.text}

    </li>

);

index의 경우는 가변적이기에 가급적 회피한다

> map()안에 있는 element는 key가 필요하다.

> key는 props로 전달되지 않는다.

JSX안에 map() 넣기

function NumberList(props){

    const numbers = props.numbers;

    const listItems = numbers.map((numbers) =>

        <ListItem key={numbers.toString()}

            vaue={number} />

    );

 

    return (

        <ul>

            {listItems}

        </ul>

    );

}

 

function NumberList(props){

    const numbers = props.numbers;

   

    return (

        <ul>

            {numbers.map((number) =>

            <ListItem key={numbers.toString()}

            vaue={number} />

            )}

        </ul>

    );

}

 

---

{Project Name} / src / Chapter08 / AttendanceBook.js

import React from 'react'

 

class AttendanceBook extends React.Component {

    constructor(props){

        super(props);

 

        this.state = {

            students: [

                {name : 'Mike'},

                {name : 'Jane'},

                {name : 'Susan'},

                {name : 'Steve'},

                {name : 'Brad'},

                {name : 'Leo'},

                {name : 'John'},

                {name : 'Sam'},

                {name : 'Kate'},

            ]

        }

    }

 

    render(){

        var {students} = this.state;

        const studentList = students.map((student) =>

            <li>{student.name}</li>

        );

 

        return (

            <ul>

                {studentList}

            </ul>

        )

    }

}

 

export default AttendanceBook;

{Project Name} / src / index.js

import React from 'react';

import ReactDOM from 'react-dom';

import './index.css';

import App from './App';

import reportWebVitals from './reportWebVitals';

import AttendanceBook from './Chapter08/AttendanceBook';

 

ReactDOM.render(

  <AttendanceBook/>,

  document.getElementById('root')

);

reportWebVitals();

Key값이 없다!

{Project Name} / src / Chapter08 / AttendanceBook.js

import React from 'react'

 

class AttendanceBook extends React.Component {

    constructor(props){

        super(props);

 

        this.state = {

            students: [

                { id: 1, name : 'Mike'},

                { id: 2, name : 'Jane'},

                { id: 3, name : 'Susan'},

                { id: 4, name : 'Steve'},

                { id: 5, name : 'Brad'},

                { id: 6, name : 'Leo'},

                { id: 7, name : 'John'},

                { id: 8, name : 'Sam'},

                { id: 9, name : 'Kate'},

            ]

        }

    }

 

    render(){

        var {students} = this.state;

        const studentList = students.map((student) =>

            <li key={student.id}>{student.name}</li>

        );

 

        return (

            <ul>

                {studentList}

            </ul>

        )

    }

}

 

export default AttendanceBook;

JSX 안에서 사용하려면?

...

    render(){

        var {students} = this.state;

      

        return (

            <ul>

                {students.map((student) =>

                    <li key={student.id}>{student.name}</li>

                )}

            </ul>

        )

    }

...