동료 프론트엔드 개발자가 환자의 통증 부위를 선택하는 체크박스 리스트를 개발하던 중 질문을 했다. 다음과 같이 데이터를 만든 후 map을 돌려 리스트를 렌더링하고, 체크된 항목의 영문명을 받아오려고 하는데 잘 안된다는 것이었다. 당연히 영문명이 객체의 key로 들어가 있으니 Object.keys()로 key를 받아와야 하고, 리턴 값이 배열이라 nested array가 되어버리니 스프레드 연산자로 꺼내주는 번거로운 과정을 거쳐야 한다. 이렇게 부자연스러운 과정을 거쳐야 한다면 데이터의 형태에 문제가 있는 것이다.
const painPartList = [
{ ankle: "발목" },
{ elbow: "팔꿈치" },
{ shoulder: "어깨" },
{ waist: "허리" },
{ wrist: "손목" },
];Array (Array of Objects)
위 배열 안에는 key가 하나뿐인 객체들이 들어있는데, 각각의 key가 모두 달라 형식이 이상하다. 그리고 영문명도 필요한 값인데 key로 되어 있어 접근이 불편하다. 그래서 동료에게 아래와 같은 형태로 수정할 것을 제안했다. 사용해야 하는 값을 value로 설정하고 모든 객체의 key를 통일한 뒤 하나의 배열로 묶는 것이다. 이렇게 하면 영문명과 국문명 모두 쉽게 접근할 수 있고, 배열에 map을 돌려 컴포넌트를 렌더링하기도 편하다.
const painPartList = [
{
code: "ankle",
name: "발목",
},
{
code: "elbow",
name: "팔꿈치",
},
{
code: "shoulder",
name: "어깨",
},
{
code: "waist",
name: "허리",
},
{
code: "wrist",
name: "손목",
},
];Object
만약 리스트 컴포넌트를 렌더링하는 것이 아니라 단순히 영문명에 해당하는 국문명을 얻고자 한다면 아래와 같은 함수를 만들어볼 수 있다. 이 함수는 key와 value를 1:1로 매칭하여 특정 key에 해당하는 value를 조회하는 객체의 특성을 활용한 것이다. getPainPartName(ankle)은 "발목"이라는 값을 리턴한다. 이러한 패턴으로 유틸리티 함수를 만들어두면 여기저기서 유용하게 사용할 수 있다.
const getPainPartName = (partCode) => {
return {
ankle: "발목",
elbow: "팔꿈치",
shoulder: "어깨",
waist: "허리",
wrist: "손목",
}[partCode];
};정리
- Array
- map 메서드로 컴포넌트를 렌더링할 때 사용
- 데이터를 순서대로 저장하고 index로 조회할 때 사용
- 똑같이 생긴 상자에 같은 유형의 내용물을 담아 일렬로 나열하는 것
- Object
- 특정 key에 해당하는 value를 조회할 때
- 상자의 모양, 내용물의 유형, 순서와 관계없이 이름표를 붙여 구분하는 것
결론적으로, 데이터의 활용 목적에 따라 어떤 자료구조를 선택할 것인지 고민해봐야 한다. 동료에게 위 내용을 쭉 설명해주면서 기본기가 정말 중요하다는 것을 다시금 깨닫게 되었다. 워낙 기본적인 내용이라 무의식적으로 사용하고 있었는데, 말로 풀어서 설명하다 보니 머릿속에서 정리도 되고 지식을 공유하는 즐거움도 느낄 수 있었다.
