2024.08.22

 

pokemonData = {
	...정보,
    types: ["풀", "독"],
}

const { ...정보, types } = pokemonData;

 

React 컴포넌트에서 객체의 types 배열을 구조 분해 할당을 통해 가져왔습니다. 이 types 값을 그대로 출력하려고 했는데, "풀독"으로 결합되어 출력되는 문제가 발생했습니다.

 

문제의 원인:

• JavaScript의 기본 동작: JavaScript에서 배열을 문자열로 자동 변환할 때는 Array.toString() 메서드가 호출됩니다. 이 메서드는 기본적으로 배열 요소를 쉼표(,)로 연결한 문자열을 반환합니다. 그러나 이 값을 직접 출력할 때는 구분자가 없이 결합된 것처럼 보일 수 있습니다.
• React에서의 출력: 구조 분해 할당을 통해 types 배열을 가져와 그대로 출력하면, 배열이 자동으로 문자열로 변환되면서 각 요소가 공백이나 쉼표 없이 결합되어 "풀독"처럼 출력됩니다. 이는 배열의 join("")과 유사한 동작입니다.

해결 방법:

• 배열을 출력하기 전에, 명시적으로 join(", ")을 사용하여 각 요소를 쉼표와 공백으로 결합한 문자열로 변환해야 합니다.