프론트엔드 - 바닐라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
반응형