당근먹는하니
귀엽고 행복해
당근먹는하니
전체 방문자
오늘
어제
  • 분류 전체보기 (274)
    • 다람쥐🐿 (26)
    • C++ 공부빵야 (7)
    • 공부👻 (5)
    • 프론트엔드✏️ (228)
      • 코드캠프 (120)
      • 팀 프로젝트✨ (31)
      • 개인공부 (67)
    • 프론트엔드 - 바닐라js (7)

블로그 메뉴

  • 홈
  • 태그
  • 방명록

공지사항

인기 글

태그

  • ssg
  • JS
  • javascript
  • 코드캠프
  • 프론트엔드
  • 알고리즘
  • 리액트
  • React-hook-form
  • 배열
  • 팀 프로젝트
  • 프로그래머스
  • next.js
  • 배포
  • 공통 컴포넌트
  • typescript
  • 부트캠프
  • react
  • javascrpit
  • algorithm
  • emotion
  • 코딩
  • refreshtoken
  • CSS
  • 코딩 부트캠프
  • HTML
  • 팀프로젝트
  • 회고
  • graphql
  • 자바스크립트
  • 팀플

최근 댓글

최근 글

티스토리

250x250
반응형
hELLO · Designed By 정상우.
당근먹는하니

귀엽고 행복해

... spread 연산자
프론트엔드 - 바닐라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
반응형
저작자표시 비영리 동일조건 (새창열림)

'프론트엔드 - 바닐라js' 카테고리의 다른 글

[샵 홈페이지]가비아 도메인 구입 후 연결  (0) 2024.12.09
[javascript] 바닐라 JS로 크롬 앱 만들기 - 끝  (0) 2022.10.11
[javascript] 바닐라 JS로 크롬 앱 만들기 - 오늘의 기분 선택하기, 디데이까지~  (0) 2022.10.06
[javascript] 바닐라 JS로 크롬 앱 만들기 - #7.1 ~ toDo list  (0) 2022.10.06
[javascript] 바닐라 JS로 크롬 앱 만들기 - 디데이 숙제  (0) 2022.10.05
    '프론트엔드 - 바닐라js' 카테고리의 다른 글
    • [샵 홈페이지]가비아 도메인 구입 후 연결
    • [javascript] 바닐라 JS로 크롬 앱 만들기 - 끝
    • [javascript] 바닐라 JS로 크롬 앱 만들기 - 오늘의 기분 선택하기, 디데이까지~
    • [javascript] 바닐라 JS로 크롬 앱 만들기 - #7.1 ~ toDo list
    당근먹는하니
    당근먹는하니

    티스토리툴바