방 추가, 삭제 기능을 만든 후 서버에 데이터를 넘겨주는 과정에서 객체 형태가 아닌 배열 형태로 넘겨 달라는 요청을 받고 찾아보던 중 Object.entries()와 Object.assign()에 대해서 알게 되었다.
아래 게시물을 참고하였고, 이 게시물은 내가 배운 개념을 정리하고자 작성한 게시물이다.
1. 객체 👉 배열
기본 형태는 Object.entries()이다.
예시에서 보면 obj라는 객체를 생성했고, Object.entries()의 인자로 obj라는 객체를 넣어줬다.
결과로는 배열이 나왔는 데 1차원 배열이 2차원 배열이 출력 되었다. 처음에는 이를 활용하는 과정에서 헷갈렸는 데
단순히 객체의 key 값이 2차원 배열의 0번째 값으로 들어가고, 객체의 value 값이 2차원 배열의 1번째 값으로 들어 갔다는 걸 볼 수 있다.
2. 배열 👉 객체
기본 형태는 Object.assign(target, source)이다.
예시를 보면 arr라는 배열을 생성했고, Object.assign()의 첫번째 인자로 빈 객체를, 두번째 인자로 객체로 변경 할 배열을 넣어준다.
결과로는 객체가 나온다. key 값에는 배열의 index 값이 들어가고, value 값에는 두번째 인자로 넣어줬던 배열의 값들이 들어간다.
'더 알아보기 > 기능' 카테고리의 다른 글
[Next.js] 다중 이미지 업로드 및 미리보기 + 드래그로 순서 변경 (0) | 2022.06.28 |
---|---|
[React, Next.js] react-beautiful-dnd를 사용하여 드래그로 순서 변경하기 (0) | 2022.06.28 |
[React] 방 추가, 삭제 기능 만들기(객체 삽입, 삭제, 수정) (0) | 2022.05.24 |
[CSS] animation, @keyframes를 사용한 화면 전화 CSS (0) | 2022.05.13 |
[Next.js] Chart.js 라이브러리로 구현한 도넛 차트의 tooltip이 말썽을 부린다. (0) | 2022.05.12 |
댓글