map() 메소드 사용

React 에서 사용하는 map() 메소드는 파라미터를 전달하여 새로운 배열을 생성한다. 

최근에 본 자바의 Stream 에서 map 의 기능하고 비슷해보인다. 아니 아마도 java가 functional 프로그래밍을 지원하려고 하면서 비슷하게 구현해놓은것 같다. 

아래와 같은 contractData 라는 state를 저장해 놓는다. 

    constructor(props){
        super(props);
 
        this.state={
            contactData:[
                {name:"Abet", phone:"010-0000-0001"},
                {name:"Betty", phone:"010-0000-0002"},
                {name:"Charlie", phone:"010-0000-0003"},
                {name:"David", phone:"010-0000-0004"}
            ]
        };
    }

render(){
        return(
            <div>
                <h1>Contacts</h1>
                <ul>
                    {/*
                    <ContactInfo name="Abet" phone="010-0000-0001"/>
                    <ContactInfo name="Betty" phone="010-0000-0002"/>
                    <ContactInfo name="Charlie" phone="010-0000-0003"/>
                    <ContactInfo name="David" phone="010-0000-0004"/>
                    */}
                    {this.state.contactData.map((contact, i) => {
                        return (
                            <ContactInfo name={contact.name} phone={contact.phone} key={i} />
                        );
 
                    })}
                </ul>
            </div>
        );
    }

위 코드에서 주석을 친 부분은 map() 메소드를 사용하기 전의 코드이다. 

그 아래 부분이 위에서 정의한 state를 사용해서 가져오는 부분이다.

최근에 자바에서 사용하는 stream 관련된 내용을 봐서 그런지 그렇게 낯설지는 않다. 실제로 짤수 있을지는 잘 모르겠지만...

말 그대로 contactData 있는 내용을 contact로 하나씩 받아서 contractInfo의 내용을 채워 넣고 있다. 

출처 : https://velopert.com/957