본문 바로가기
FE/JS

[ JavaScript ] 내장함수

by Chars4785 2019. 9. 25.

@ 궁금한 이유

   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;
  }

 

 


@ 참고

https://learnjs.vlpt.us/basics/07-array.html

'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

댓글