react-tutorial
react-tutorial copied to clipboard
velopert
15. 배열에 항목 수정하기 · GitBook
boolean 값으로 배열 항목 수정하기
- 수정할 때 불변성을 지켜준다.
- 불변성을 지킨다는건 state값을 유지 한다고 생각하면 된다.
- 수정할때에도 map과 if문을 비교하여 setState를 활용한다.
- style 속성에도 js를 사용할 수 있다.
- boolean 값으로 on/off 할 때 onToggle 이란 함수명을 자주 사용하자
배열이 크고 interact가 빈번할 경우 매번 spread operator로 상태를 생성하는것은 성능상 문제가 있지 않을지 걱정되는데 다른 표현으로 이러한 상황을 해결할수 있을까요..?
추가로 배열의 내용을 업데이트하는 기능을 구현해보았습니다. 항상 좋은 강의 감사합니다! 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
제가 머리가 나빠서 아래 부분은 정말 이해하기 어렵더군요.
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에서 정의되어 있답니다.
따라해보시면 아시겠지만 ...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) 에서
- ...user는 배열 안의 각각의 {}를 가리키는거 같고
- active를 반전시켜줘야하는데 왜 user.active가 아니고 active를 사용한건가요?
— You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/velopert/react-tutorial/issues/31#issuecomment-961688866, 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.
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 https://github.com/velopert/react-tutorial/issues/31#issuecomment-960446580, 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.
... 문법에 대해 질문이 있는데요, ... 다음에 a:b가 올경우, a가 없는거면 b값으로 새로 생성하고, 있는거면 수정하는건가요??
이전 filter나 map을 쓰면 배열 자체는 새로 생성되겠지만, 배열 내 객체는 새로 만들어진 놈을 제외하면 이전 참조 그대로일텐데요.. Shallow Copy를 해도 가장 바깥 배열이 새 객체라서 불변성에 문제가 없다고 보면 될까요?
중간 정리.. 리액트에서 데이터, 스테이트 등이 변경되는 이벤트 처리 방법..
- onRemove, onToggle 등의 함수 리터럴을 App.js 에서 선언해서, 하위 콤포넌트에게 이벤트 핸들러 방식으로 전달해준다.
- 이 때, onRemove, onToggle 등의 함수 리터럴은, setState 함수 호출을 자신 안에 포함하고 있어야 한다.
- 하위 콤포넌트에서 onClick 등의 사용자 이벤트에, onRemove 등 함수 리터럴을 바인딩해준다. 이 때, 꼭 Arrow Function 을 써야 한다.
- onRemove 등 (setState 함수가 포함된) 함수 리터럴이 실행되면, 데이터, 스테이트 등에 실제 변동이 발생하고, DOM 리-렌더링이 실행된다.
우연히 봤다가 정주행 중입니다. 저 같은 침팬지도 이해하기 너무 쉽게 설명해 주셔서 감사합니다. 너무 맛있어서 체할 거 같습니다. 다시 한번 감사드립니다.!
