Polpid's World

map() 메소드 사용 본문

Development/React

map() 메소드 사용

폴피드 2017.01.16 18:58

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


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


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


1
2
3
4
5
6
7
8
9
10
11
12
    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"}
            ]
        };
    }
cs


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
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>
        );
    }
cs


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


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


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


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



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


'Development > React' 카테고리의 다른 글

edX - Introduction to ReactJS Module2 내용정리  (0) 2018.05.30
edX - Introduction to ReactJS Module1 내용정리  (0) 2018.04.18
map() 메소드 사용  (0) 2017.01.16
React 에서 props 사용  (0) 2017.01.09
React.. 끄적끄적.  (0) 2017.01.09
0 Comments
댓글쓰기 폼