@ 궁금한 이유
React 공부를 하면서 데이터 관리를 위해서 내장함수 map, concat, filter 등 많은 부분 사용하는 것이 많았다. 그래서 정확히 정리하고 싶어서
@ 공부
## map
map 은 배열 안의 각 원소를 변환 할 때 사용 되며, 이 과정에서 새로운 배열이 만들어집니다.
const users =[
{
id:1,
username: 'lee1',
email:'test@name'
},
{
id:2,
username: 'lee2',
email:'test2@name'
},
{
id:3,
username: 'lee3',
email:'test3@name'
}
];
users.map(
(user,index) => (<User user={user} />)
)
key 가 없다면
[ a,b,c,d ] => [ a,b,z,c,d]
1) [ a,b,z,d ]
2) [ a,b,z,c ]
3) [ a,b,z,c,d ]
> 이렇게 비효율적으로 바꾼다. 각 배열의 원소가 어떤 값을 렌더링 해야 하는지 모르기 때문에 그냥 b가 바뀌었구나 생각한다.
key 가 있다면
> 어떤 객체를 가리키고 있는지 알고 있다.
[ a,b,c,d ] => [ a,b,z,c,d]
1) [ a,b,z,c,d] > 사이에 낀다.
만약 값이 별루 안바뀐다면 index 를 사용해서 key 값을 해도 되지만 만약 자주 바뀐다면 index 값이 key 가 되어서 비효율적으로 작동될수 있다.
## forEach
## 배열의 추가
const onCreate =() =>{
const user ={
id:nextId.current,
username,
email,
}
//const user ={
// id:nextId.current,
// ...inputs
// }
//
// setUsers([...users,user]);
setUsers(users.concat(user));
setInput({
username:'',
email:''
})
console.log(nextId.current);
nextId.current += 1;
}
@ 참고
'FE > JS' 카테고리의 다른 글
[Js] 무한 스크롤 (0) | 2021.07.31 |
---|---|
[ JS ] ES2015 (0) | 2019.10.23 |
[ JS ] 비동기 ( axios , promise, async ,,) (0) | 2019.09.05 |
JS - var,let,const (0) | 2019.07.11 |
JS - 메모리 (0) | 2019.07.10 |
댓글