자바스크립트는 알면 알수록 스레기같지만 그래도 공부를 하는 학생의 마음가짐으로 다시한번 차분히 써내려가는 일지.
import Child from './child.jsx'
import {useState} from 'react'
const Parent = () =>{
//const [name, setName]=useState('')
//const [age, setAge]=useState(0)
//const [isMarried,setIsMarried]=useState(false)
const [form,setForm]=useState([{
name:'', age:0, isMarried:false
}])
const [list, setList]=useState([]);
const handleAdd=() =>{
setList([
...list, form
])
}
return(
<div style={{border: '1px solid green', padding:'10px'}}>
<p>이름</p>
<input
type="text"
value={form.name}
onChange={(e)=>setForm({
...form,
name: e.target.value,
})}
/>
<p>나이</p>
<input
type="number"
value={form.age}
onChange={(e)=>setForm({
...form,
age: e.target.value,
})}
/>
<p>결혼유무</p>
<input
type="checkbox"
checked={form.isMarried}
onChange={(e)=>setForm({
...form,
isMarried: form.isMarried
})}
/>
<button onClick={handleAdd}>추가</button>
{
list.map((item)=>
<Child name={item.name} age={item.age} isMarried={item.isMarried} />
)
}
</div>
)
}
export default Parent일단 코드는 대충 이러함. 다 볼 필요 없고
여기서 첨에 문제된 오류 문구는
map is not function
이 놈인데.. 뭐냐면
여기 서 알게 된 사실이었다.
단순히 말하자면 map을 배열에만 써야해!! 이건데
아니.. 다시 보니까
const [form,setForm]=useState([{
name:'', age:0, isMarried:false
}])이거 배열아닌가요? []안에 들어가있잖아.. form.name이런건 왜 된건데요 그럼 얘 객체란 말인가?
생각해보니 좀 이상하잖아...?
.
.
.
.
아 .. 자바스크립트에서 배열이 뭐였더라..?.. 다시 나는 아는게 0이 된 기분..
그래서 참고한 건 일단
여기
일단 중요한 사실!!
자바스크립트 배열은 index를 property key로 가지며 length property를 갖는 특수한 객체다
사실 배열의 요소는 property 값이었다
유사배열객체(Array-like-object)라는 말도 나온다
리스트 같은 객체(List-like-object) 라는 말도 나온다
제발 이거 한번에 정리해주실 분 말장난이신가요노잼인데
원래 자료구조에서 배열이라하면, "동일한 크기의 메모리 공간이 빈틈없이 연속적으로 나열된 구조"다.
다시 말해서 배열 안에 요소들은 다 동일한 데이터 타입, 동일한 크기의 메모리 공간을 차지한다는 것이다.
또한 순서에 따라 값을 가져오게 하려고 값들이 연속적으로 메모리에 인접해있다. 그니까 0번째를 알아야 1번째를 안다는건데, 5를 가려면 순차적으로 0>1>2>3>4>5 이렇게 도달해야한다는 뜻같다.
자바스크립트는 기존의 배열이랑 다르다!!!
배열 요소를 위한 각각 메모리 공간은 동일한 크기를 갖지 않아도 되며 연속적이지 않아도 된다.
자바스크립트의 배열은 일반적인 배열의 동작을 흉내 낸 특수한 객체다...
이렇게 하면 특정 요소를 탐색,삽입,삭제 하는 경우 성능면에서 빠르다. 접근은 느리지만..
그니까 이걸 보완하려고 배열을 일반 객체와 구별하여 배열처럼 동작하도록 최적화해 구현했다는데.. 이것마저도 원래 배열보다 느리다고 한다 ㅋ
const arr = ['a','b','c','d']
const obj - {
'0' : 'a',
'1' : 'b',
'2' : 'c',
'3' : 'd',
'length' : 4.
};arr과 obj 는 console.log 에 찍히는 값이 같다.
두 객체의 차이는
배열 리터럴 arr의 프로토타입 객체는 Array.prototype
객체 리터럴 obj의 프로토타입 객체는 Object.prototype 이라는 것.
그래서 유사배열객체는 뭐냐면
index와 length 프로퍼티가 있어서 "배열처럼 보이는" "객체"다.
이걸 구분하는 이유는
유사배열은 배열 메서드를 사용할 수 없기 때문
이걸 쓰고싶다!! 할 때는 두 가지 방법이 있는데
- 배열의 프로토 타입에서 배열 메서드를 빌려서 사용하기
- Array.from() 메서드를 사용해 유사배열 객체를 얕게 복사해 새로운 객체로 만들기
.
.
.
.
이까지 쓰고보니 이상하다..
form은 이미 배열이잖아..???
.. 더 알아봐야겠다
