[리액트를 다루는 기술] 6. 컴포넌트 반복

1. map 함수 문법

- arr.map(callback, [arg])

- 함수의 파라미터

-> 처리하고 있는 요소

-> 요소의 index 값

-> 요소의 배열

- arg: callback 함수 내부에서 사용할 this 레퍼런스

2. ES6 문법

- const result = numbers.map(num = num * num)

3. Key 

- key가 없다면 가상 DOM을 비교하는 과정에서 리스트를 순차적으로 비교하면서 변화를 감지

- key가 있으면 이보다 효과적으로 변화를 알 수 있음

- key 값은 언제나 유일

4. 유동적인 데이터 랜더링

1) 초기 state 값 설정하기

2) 데이터 추가 기능 설정하기

3) 데이터 제거 기능 구현

1) 초기 state 설정하기

state = { names =['눈사람','눈알','눈싸움']}

2) 데이터 추가 기능 설정하기

- 편의상 name의 레퍼런스를 미리 만듬: const { name } = this.stae;

3) 데이터 제거 기능 구현

- names: { ...names.slice(0, index), ...names.slice(index+1, names.length)

* 전개 연산자( ... ) : ES6 문법,  ... 뒤에 위치한 배열을 그대로 꺼내서 배열에 복사하는 역할

-> let numbers = [1,2,3,4,5]

-> let moreNumbers = [... numbers, 6] -> 1,2,3,4,5,6

- onDoubleClick = {this.handleRemove()}  임의 함수에 파라미터(index)가 들어간다면

-> onDoubleClick = { ()  => this.handle Remove(index)}

-> 내부에서 함수를 새로 만들면 된다.

5. fileter 사용

- names: names.filter((item,i) => i !== index )

-> index  번째를 제외한 원소만 있는 새 배열 생성

6. 정리

- key 값 설정을 항상 주의, key 값은 항상 유일

- 배열을 직접 변형하는 것이 아니라 concat, slice, 전개연산자, filter함수 등을 사용해서 새로운 배열을 만든후, setState를 적용해야함

"파트너스 활동을 통해 일정액의 수수료를 제공받을 수 있음"