[NextJS] map 함수 스페이스바 있는 컬럼명 데이터 꺼내기

📱테스트 환경

"react": "18.2.0"
"react-dom": "18.2.0"
"typescript": "^5.1.6"

---

😢 내가 겪은 문제

Array.map() 함수는 너무나 자주 쓰기 때문에 데이터 꺼내 쓰는 방법 정도는 알고 있다.

dataArray.map((v, i) => {
	return <>{v.title}</>
}

보통 이런식으로 다 꺼내 쓸 것이다. 나도 지금까지 다  ~ 이렇게 꺼내왔다.

근데 오늘 API 에 데이터 컬럼이 한글로 내려왔다. 그것도 문제없다.

dataArray.map((v, i) => {
	return <>{v.타이틀}</>
}

이렇게 그냥 쓰면 된다. 근데 이제 문제는 컬러명이 서브 타이틀 로 넘어왔을 때는 ? 저렇게 꺼내쓰면 에러난다.

사이에 공백이 있어서 인식을 못한다. 그래서 난처했는데, 다행히 해결방법은 아주아주 간단하다.

아마 다 알고 있겠지만, 못하는 경우는 잊은게 대부분일꺼다. 내가 그랬다.

dataArray.map((v, i) => {
	return <>{v["서브 타이틀"]}</>
}

옛날에야 컬럼명을 무조건 영어로 스네이크 또는 카멜형식으로 썼지, 요즘에는 한글로 컬럼명을 주는 경우가 많을 것이다.

아무래도 한글이 편하다보니 영어로 할 때 보다 단어만 보고 이게 어떤 데이터를 담고 있는지 이해하기가 쉽기 때문이 아닐까 싶다.

내가 이번에 처음 겪은건 아니고 여러번 있었지만, 컬럼명에 공백은 처음겪어봤다 ...

아무튼 이런 표기법은 요즘에 많이 사용하니 알아두면 언젠가 도움이 될 것이다.