15. 배열에 항목 수정하기 · GitBook

[utterances-bot]

15. 배열에 항목 수정하기 · GitBook

https://react.vlpt.us/basic/15-array-modify.html

[jinsugoda]

좋은 글 너무 감사합니다.!!!
react 배우기 강좌중 최고입니다.

[wenodev]

boolean 값으로 배열 항목 수정하기

• 수정할 때 불변성을 지켜준다.
  • 불변성을 지킨다는건 state값을 유지 한다고 생각하면 된다.
• 수정할때에도 map과 if문을 비교하여 setState를 활용한다.
• style 속성에도 js를 사용할 수 있다.
• boolean 값으로 on/off 할 때 onToggle 이란 함수명을 자주 사용하자

[golee]

배열이 크고 interact가 빈번할 경우 매번 spread operator로 상태를 생성하는것은 성능상 문제가 있지 않을지 걱정되는데 다른 표현으로 이러한 상황을 해결할수 있을까요..?

[jody96]

감사합니다!!!

[sshusshu]

배열의 불변성을 유지하면서 배열을 업데이트 할 때에도 map 함수를 사용

[donghyuun]

추가로 배열의 내용을 업데이트하는 기능을 구현해보았습니다. 항상 좋은 강의 감사합니다!
https://velog.io/@hyunn/%EB%B0%B0%EC%97%B4%EC%97%90-%EB%82%B4%EC%9A%A9-%EC%88%98%EC%A0%95%ED%95%98%EA%B8%B0

[aaboo]

제가 머리가 나빠서 아래 부분은 정말 이해하기 어렵더군요.

  const onToggle = id => {
    setUsers(
      users.map(user =>
        user.id === id ? { ...user, active: !user.active } : user
      )
    );
  };

그래서 요렇게 바꾸어 봤는데... 이해하기 조금 편하시니 참고 부탁드려요.

  const onToggle = id => {
    let newUsers = users.map(user=>{
        user.active=(user.id===id?(!users.active):user.active);
        return user;
    });
    console.log(users, newUsers);
    setUsers(newUsers);
  };

map은 "주어진 배열의 값들을 오름차순으로 접근해 새로운 값을 정의하고 신규 배열을 만들어 반환한다"라고 ECMA에서 정의되어 있답니다.

[donghyuun]

따라해보시면 아시겠지만 ...user 는 제가 따로 active 속성을 주었기때문에, 기존 user 객체의 active 속성을 제외한 나머지 속성들이 들어있는 것입니다(spread문법) 결론적으로 { }가 user객체를 가리킨다고 보시면 되고 그안에 속성을 주는 것이기 때문에 user.active라 하지 않고 active만 해도 user 객체안의 속성으로 입력될 수 있는 것입니다. 2021년 11월 5일 (금) 오후 4:49, premiunCarrotShop ***@***.***>님이 작성:

…

users.map(user => user.id === id ? { ...user, active: !user.active } : user) 에서 1. ...user는 배열 안의 각각의 {}를 가리키는거 같고 2. active를 반전시켜줘야하는데 왜 user.active가 아니고 active를 사용한건가요? — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#31 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ATUKJQ5AQQC6PBHI7DEQ4FLUKOEB3ANCNFSM4OK5LGJQ> . Triage notifications on the go with GitHub Mobile for iOS <https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675> or Android <https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub>.

[donghyuun]

map은 "주어진 배열의 값들을 오름차순으로 접근해 새로운 값을 정의하고 신규 배열을 만들어 반환한다"라고 ECMA에서 정의되어 있답니다. 맞습니다. setUser 안에서 map함수를 실행하여 return 된 새로운 배열이 결국 setUser에 입력되어 toggle 시 배열이 바뀌는 것입니다. 저도 머리가 많이 나쁘답니다 ㅋㅋ 파이팅하시기 바랍니다! 2021년 11월 4일 (목) 오후 1:17, aaboo ***@***.***>님이 작성:

…

제가 머리가 나빠서 아래 부분은 정말 이해하기 어렵더군요. const onToggle = id => { setUsers( users.map(user => user.id === id ? { ...user, active: !user.active } : user ) ); }; 그래서 요렇게 바꾸어 봤는데... 이해하기 조금 편하시니 참고 부탁드려요. const onToggle = id => { let newUsers = users.map(user=>{ user.active=(user.id===id?(!users.active):user.active); return user; }); console.log(users, newUsers); setUsers(newUsers); }; map은 "주어진 배열의 값들을 오름차순으로 접근해 새로운 값을 정의하고 신규 배열을 만들어 반환한다"라고 ECMA에서 정의되어 있답니다. — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#31 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ATUKJQ7ICH6DL5KYZS2X4TDUKICM7ANCNFSM4OK5LGJQ> . Triage notifications on the go with GitHub Mobile for iOS <https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675> or Android <https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub>.

[unhyif]

user.id 말고도, user 자체로도 map 안에서 비교할 수가 있는데 어떤 방식을 더 많이 사용 하나요?

[inviolable]

... 문법에 대해 질문이 있는데요, ... 다음에 a:b가 올경우, a가 없는거면 b값으로 새로 생성하고, 있는거면 수정하는건가요??

[bellosogno]

이전 filter나 map을 쓰면 배열 자체는 새로 생성되겠지만, 배열 내 객체는 새로 만들어진 놈을 제외하면 이전 참조 그대로일텐데요..
Shallow Copy를 해도 가장 바깥 배열이 새 객체라서 불변성에 문제가 없다고 보면 될까요?

[onpul]

(북마크용 댓글 // 20230303)

[KangWoosung]

중간 정리..
리액트에서 데이터, 스테이트 등이 변경되는 이벤트 처리 방법..

1. onRemove, onToggle 등의 함수 리터럴을 App.js 에서 선언해서, 하위 콤포넌트에게 이벤트 핸들러 방식으로 전달해준다.
2. 이 때, onRemove, onToggle 등의 함수 리터럴은, setState 함수 호출을 자신 안에 포함하고 있어야 한다.
3. 하위 콤포넌트에서 onClick 등의 사용자 이벤트에, onRemove 등 함수 리터럴을 바인딩해준다. 이 때, 꼭 Arrow Function 을 써야 한다.
4. onRemove 등 (setState 함수가 포함된) 함수 리터럴이 실행되면, 데이터, 스테이트 등에 실제 변동이 발생하고, DOM 리-렌더링이 실행된다.

[minjune8506]

@aaboo 조금 오래됐지만 user.active를 바꾸게 되면 불변성을 해치게 될 것 같아요