import React, {useState} from 'react';
배열 메소드 .map( )
arr.map( fn ) : 함수를 받아 특정 명령을 시행하고, 새로운 배열을 반환
※ 실무에서 정말 많이 사용됨! 틈틈이 연습할 것
<script>
[1,2,3].map( (item, index)=>{
return `<a></a>`// <a> 여기서는 그저 문자, data! (태그 아님)
// "return 리턴해서 html에게 배출할게"
// 컴파일해서 html 던져주니 비로소 '태그'로 인식하고 빛을 발해
})
</script>
useState가 다루는 data 두가지 유형
- 원시 data : 값 string, 123, null, undefined, true/false
- 배열/객체 : '위치 좌표'만 '값'으로 인식
(그래서 useState 예시 설명들 다 간단한 숫자값 사용)
① 초기값으로 [배열] 넣어보자.
② 배열/객체는 '값'이 아닌, '위치 좌표' 전달
③ 매개인자 num에 초기값 [배열] 삽입됨.
<script>
//[배열]{객체}는 값 아닌, '위치좌표' 전달 ↓ // 초기값 배열
const [num, settingNum] = useState([ ])
// ↑배열 삽입시 ↑
// ㅣ함수, 위치좌표가 변해야지, 값만 바꿔치기 하면 렌더링 안됨.
</script>④ settingNum 함수가 렌더링되려면, 위치좌표가 변해야! 값만 바꿔치기 하면 렌더링안됨.
위치 좌표가 변한다는 것은? [ ...[1,2,3] ] 즉, [ ] 기호를 벗기겠다!
<script>
//↓ '위치좌표'를 저장한다는 뜻 (=)
const copy = num
settingNum( copy ); // 값만 바꿔치기, 위치좌표 안바뀜. (=렌더링 안됨)
copy = [... num] // [ ] 기호를 벗기겠다!
settingNum( copy ); // 위치좌표 바뀜(=렌더링 두번 됨)
</script>