방금 전에 썼던 글에서... 수정되기 전(할루시네이션이 왔던 것 같은) 코드와 고쳐서 나온 코드를 비교해 봤는데,
다른 건 다 똑같아 보이는데
// 수정된 코드
let { id } = useParams();이 부분만 다른 것 같았다.
내가 그 전에
let id = useParams();이렇게 썼던 게 화근인가 본데, 왜 그런지 물어봤다.
id를 {} 로 감싸야만 제대로 나오는 이유가 뭔가요?
1. useParams()의 반환값이 객체이기 때문
useParams()는 URL의 파라미터들을 키-값 쌍(key-value pair) 형태로 반환합니다. 즉, useParams()가 반환하는 값은 객체(Object)입니다.
예를 들어, URL이 다음과 같다고 가정해봅시다:
/detail/2이 경우, useParams()의 반환값은 다음과 같습니다:
{ id: "2" }즉, id라는 키를 가진 객체로 반환됩니다. 이 반환값을 변수에 저장하려면 아래 두 가지 방법 중 하나를 사용해야 합니다.
방법 1: 객체를 그대로 저장
let params = useParams();
console.log(params); // { id: "2" }
console.log(params.id); // "2"방법 2: 객체 구조 분해 할당 (Destructuring)
let { id } = useParams();
console.log(id); // "2"구조 분해 할당은 객체에서 특정 키의 값을 바로 변수로 추출할 수 있는 자바스크립트 문법입니다. 따라서 let { id } = useParams();를 사용하면, id라는 변수에 바로 URL 파라미터 값을 저장할 수 있습니다.
2. let id = useParams();가 문제인 이유
let id = useParams();이 코드는 useParams()의 반환값 전체를 id라는 변수에 저장하는 것입니다. 즉, id에는 객체 전체가 저장됩니다.
예를 들어, useParams()가 { id: "2" }를 반환한다고 하면:
let id = useParams();
console.log(id); // { id: "2" }이제 id는 객체이기 때문에, id 안의 값(예: "2")에 접근하려면 id.id를 사용해야 합니다:
console.log(id.id); // "2"하지만 코드에서 parseInt(id)를 사용한 경우, 여기서 문제가 발생합니다. parseInt()는 숫자 문자열을 숫자로 변환하는 함수인데, 객체를 전달하면 변환할 수 없으므로 오류가 나거나 예상치 못한 동작이 발생합니다.
3. 올바른 방식: 구조 분해 할당
구조 분해 할당을 사용하면 useParams()의 반환값 중 특정 키의 값을 바로 추출할 수 있습니다.
let { id } = useParams();이 코드는 다음과 같은 일을 수행합니다:
1. useParams()의 반환값(예: { id: "2" })에서 id 키의 값을 바로 추출합니다.
2. 추출된 값 "2"는 id라는 변수에 저장됩니다.
이렇게 하면 바로 id 변수를 사용할 수 있으므로, 코드를 간결하게 작성할 수 있고 오류의 가능성도 줄어듭니다:
let { id } = useParams();
console.log(id); // "2"
console.log(parseInt(id)); // 24. 요약
useParams()는 URL 파라미터를 객체 형태로 반환합니다.let id = useParams();는id에 객체 전체를 저장하며, 원하는 값에 접근하려면id.id를 사용해야 합니다.let { id } = useParams();는 구조 분해 할당을 사용하여 객체의 특정 키(id)의 값을 추출하여 바로 사용할 수 있게 합니다.- 따라서 구조 분해 할당을 사용하는 것이 더 간단하고, 정확히 원하는 값을 가져오기에 적합합니다.
5. 실수 방지 팁
만약 let id = useParams(); 형태로 코드를 작성했을 경우:
console.log(id)를 사용해 반환값을 확인해 보세요. 반환값이 객체로 출력되면, 객체 구조 분해 할당이 필요합니다.useParams()를 사용할 때는 항상 반환값이 객체라는 점을 염두에 두고, 구조 분해 할당을 사용하는 습관을 들이면 좋습니다.
