반응형
  • map 함수
    • map(함수, 순서가 있는 자료형)
    • map 의 결과는 map object 이기 때문에 사용하기 편한 list 형태로 변환한다.
def remove_blank(x):
  return x.strip()

items=[' mouse', ' monitor ']

items=list(map(remove_blank, items))

print(items)

# output
# ['mouse', 'monitor']

# 람다함수로 표기할 경우
items=list(map(lambda x:x.strip(), items))

 

  • filter 함수
    • filter(함수, 순서가 있는 자료형)
def func(x):
  return x < 0

print(list(filter(func, [-3, 0, 2, 7, -7])))

# output
# [-3, -7]

# 람다함수로 표현
print(list(filter(lambda x:x<0, [-3, 0, 2, 7, -7])))

 

728x90
반응형

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

파이썬 문법 : method  (0) 2023.03.03
파이썬 문법 : class 속성들  (0) 2023.03.02
파이썬 문법 : 람다 함수  (0) 2023.02.27
파이썬 문법 : 키워드 가변 매개변수 kwargs  (0) 2023.02.27
파이썬 문법 : 튜플  (0) 2023.02.27
반응형

React 에서 Key 가 필요한 이유

  • Map 사용시 고유한 Key 가 필요하다.
  • React 는 상태를 메모리에 저장하고 있다가 변경된 부분만 렌더링 한다.
  • Key 값이 없으면 모든 데이터를 비교해야 하지만 Key 가 있으면 Key만 비교하면 된다.
  • <ul>
      {props.users.map((user) => (
        <li key={user.id}>
          {user.username} ({user.age} years old)
        </li>
      ))}
    </ul>

Map 에서 index 를 Key로 하면 안되는 이유

  • 0번의 index 가 삭제되면 React 가 변경을 감지하여 리렌더링 되고 0번 부터 다시 매핑한다.
  • 1번 인덱스가 0번으로 매핑이 된다.
  • 결론적으로 인덱스가 추가되거나 삭제되면 값이 바뀌기 때문에 index 를 key 로 사용하는것은 안좋다.
728x90
반응형
반응형

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


728x90
반응형

'Development > Frontend skills' 카테고리의 다른 글

[npm] 왠지 자주 쓸것 같은 npm 명령어  (0) 2018.04.17
npm install --save --save-dev  (0) 2017.05.30
React 에서 props 사용  (0) 2017.01.09
React.. 끄적끄적.  (0) 2017.01.09
Mac 에서 Node.js 설치  (0) 2017.01.05

+ Recent posts