프론트엔드 - 바닐라js
... spread 연산자
당근먹는하니
2022. 12. 29. 09:15
728x90
반응형
// 틀렸음
const [person, setPerson] = useState({
name: '엘리',
title: '개발자',
mentors: [
{
name: '밥',
title: '시니어개발자',
},
{
name: '제임스',
title: '시니어개발자',
},
],
});
<button
onClick={() => {
const prev = prompt(`누구의 이름을 바꾸고 싶은가요?`);
const current = prompt(`이름을 무엇으로 바꾸고 싶은가요?`);
setPerson((person) => ({
...person, mentors: person.mentors.map((mentor) => {
if (mentor.name === prev) {
return {...mentor, current}
}
})}))
}}
>
{...mentor(스프레드 연산자로 넣고) 바꾸고 싶은 걸 current 로 바꿔야 하는데 지금은 뜬금없이 current 를 넣어주는 중
// O
const [person, setPerson] = useState({
name: '엘리',
title: '개발자',
mentors: [
{
name: '밥',
title: '시니어개발자',
},
{
name: '제임스',
title: '시니어개발자',
},
],
});
<button
onClick={() => {
const prev = prompt(`누구의 이름을 바꾸고 싶은가요?`);
const current = prompt(`이름을 무엇으로 바꾸고 싶은가요?`);
setPerson((person) => ({
...person, mentors: person.mentors.map((mentor) => {
if (mentor.name === prev) {
return {...mentor, name: current}
}
return mentor;
})}))
}}
>
이게 맞는 코드...겠지? 이것조차 자신감이 없다...
Person setting 할건데 person(기존에 쓰던 prev) 애들 일단 스프레드로 넣어주고 멘토에서 바꿀 애 이름을 찾고 스프레드로 또 뿌리고(나머지 애들은 그냥 써야하니까) 바꾸려는 애 이름을 바꾼다.
!! 처음에 person => 할 때 () 안에 {}를 넣어줘야 한다.
기초...인데 코드로 치기가 왜 이렇게 어렵지
mentors 에서 뿌리면서 들어가서 실패
mentor.name이 아니라 name: current 라고 써야함
마지막에 mentor return도 안 함
괄호지옥.. .
728x90
반응형