4. 동적 라우팅으로 가져오는 데이터에 사용한 구조분해할당

👀 구조 분해 할당

- 배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 하는 JavaScript 표현식

 

* 배열 구조 분해 - 기본 할당

var foo = ["one", "two", "three"];

var [red, yellow, green] = foo;
console.log(red); // "one"
console.log(yellow); // "two"
console.log(green); // "three"

 

* 객체 구조 분해 - 기본 할당

var o = {p: 42, q: true};
var {p, q} = o;

console.log(p); // 42
console.log(q); // true

* 새로운 변수 이름으로 할당 : (key쪽에 기존 변수 이름 : value쪽에 원하는 이름)을 붙여주면 새로운 이름으로 할당이 가능하다.

var o = {p: 42, q: true};
var {p: foo, q: bar} = o;

console.log(foo); // 42
console.log(bar); // true

 

이런 식으로 원래 변수를 지정하던 방향을 거꾸로 선언쪽에 속성을 해체해서 쓸 이름들을 적고 값쪽에 기존 foo 배열을 불러온 후

console.log를 각 선언쪽에 속성을 해체해서 쓸 이름들을 불러오면 red, yellow, green이 기존 배열 foo의 값들의 새 이름이 되어서

각 속성이 조각나서 담기는것 같다.

객체에서는 key 이름을 신경써야하고 배열에서는 순서를 신경써줘야 한다.

 

---

 

예전에 input 값들을 모아서 저장할때도 써본적이 있었는데

이번에는 velog 상세페이지 헤더부분에 쓸일이 있었다.

각 card의 상세페이지를 들어갈때마다 로고 부분에 게시글을 쓴 유저의 id를 넣어줘야 했다.

 

useRouter을 담은 router을 console.log를 찍어보면 

상세페이지 동적라우팅의 url 정보가 담겨있었다.

여기서 id가 표시되어있는 detail만 필요했기 때문에

구조분해할당으로 router.query 객체의 detail 속성만 새로운 key인

id로 지정해서 꺼내와서 상세페이지 헤더에 적용했다.

이 카드를 클릭하면

그 카드의 상세페이지의 헤더에 작성자의 id.log가 표시

 

 

* 구조 분해 할당 자세한 내용

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment#%EB%B0%B0%EC%97%B4_%EA%B5%AC%EC%A1%B0_%EB%B6%84%ED%95%B4