map 과 filter

 

---

map() 함수 문법

• callbackFunction • 새로운 배열의 요소를 생성하는 함수로, currentValue, index, array 3개의 인 수를 가질 수 있다. 
• [this.Arg] 는 생략 가능한 것으로 callbackFunction 에서 사용할 this 객체

---

배열 데이터, map()과 함께 사용

 

• 배열 데이터를 좀 더 효율적으로 그리기 위해서 map 사용! 

• key
  • 기존 요소와 업데이트 요소를 비교하는데 사용되는 속성,
  • 다른요소와 겹치지 않는 고유한 값이어야 합니다. 
  • key는 고유한 값을 가져야 하기 때문에 배열의 요소 중 고유한 값(id 등)이 존재하 지 않는다면 index로 사용해도 됩니다! (단, index 를 사용하는 것은 최후의 수단!)
• div 같은 태그가 아닌 만들어준 컴포넌트와 함께 사용할 수도 있겠죠!

 

---

Component에 map() 적용

 

• map() 함수를 이용해 컴포넌트를 생성할 때 “key” 사용을 권장한다.
• Why? React는 업데이트 전 기존 요소와 업데이트 후 요소를 비교하는데 key를 사용

• Key를 index 값으로 설정할 시, 리스트의 순서가 변경되면 모든 key가 변 경되므로 key는 index 가 아닌 고유한 값으로 설정해야 한다
  • But, 현재는 고유 값으로 설정할 만한 게 없으니, index로 테스트

 

 

• 각 원소마다 고유 id 값을 갖고 있다면? 다음과 같이 설정할 수 있다!

 

 

• input으로 새로운 알파벳 추가해보기

• input으로 새로운 알파벳 추가해보기

 

 

---

(참고) props로 데이터 전달시

 

• 데이터가 들어오지 않는 경우를 대비해서, ? 사용

 

 

 

• props의 데이터가 들어오는것이 확실하지 않다면, 해당 데이터 뒤에 ? 붙여주면 if 문 처럼 동작합니다.
  • arr 가 undefined 가 아니라면, .map을 실행
  • undefined라면, 뒷 부분은 실행되지 않음
• 무조건 써주는 것이 아니라, 데이터가 들어오지 않을 수도 있는 경우에만 작 성!
  • 일반적인 경우라면 error를 보고 나서 데이터를 전달하는게 좋음

---

 

filter() 함수

• filter()의 인자로 넘겨지는 callback 함수의 테스트(조건)를 통과하는 요소 를 모아 새로운 배열을 생성.
• filter() 함수를 사용하여 배열에서 원하는 값을 삭제하는 코드 구현 가능.

---

filter() 응용

 

알파벳을 더블 클릭 했을 때 알파벳 삭제해보기