본문 바로가기
Coding/Etc

React Native Object 배열(Array)로 바꾸는 방법

by Hide­ 2018. 2. 16.
반응형

react native object to array / react native object index

리액트 네이티브를 사용하여 앱을 제작하고 있다.

먼저 내가 받아오는 자료의 형식은 아래와 같다.


Array [

Object {

   "mon":"abcdefg"

},

Object {

   "mon":"bcdefgh"

}, 

Object {

    "mon":"cdefghi"

},

Object {

    "mon":"dddddd"

},

Object {

    "mon": "aaaaaaa"

}

]


튼 이런식으로 배열(Array)안에 오브젝트(Object)들이 여러개 들어있다.

오브젝트는 무조건 하나의 키밸류 쌍만 오도록 정해놨으므로 정해진 틀을 벗어나는 경우는 존재하지 않는다.

(위 배열을 menu 라고 부른다고 가정하자)

위와 같은 경우 menu의 첫번째 값을 불러오려면 배열이기 때문에 index를 통해 접근할 수 있다.

menu[0]을 하면 첫번째 {"mon":"abcdefg"} 가 나올것이고 menu[1]을 하면 {"mon":"bcdefgh"} 가 나올 것이다.

그런데 안에 있는 값들은 Object이기 때문에 인덱스로 접근할 수 없다. (물론 순서도 없다. 오브젝트라서)

키의 이름을 줘서 다음과 같이 접근해야한다. menu[0]['mon']

위 정보는 내가 미리 저장해놓은 교내 식단 정보를 불러오는 것이었는데 mon이 요일을 뜻한다.

그래서 사용자가 요일을 정할때마다 요일이 바뀌기 때문에 키 이름이 아닌 인덱스로 접근해야 한다.

방법을 찾아봤더니 역시나 존재한다.

먼저 Object.keys(menu[0])을 하면 Array형태로 mon이 반환된다.

즉, 키 이름이 반환된 것인데 이제 menu의 키값으로 반환된 정보를 넘겨주면 된다.

menu[0][Object.keys(menu[0])]


그럼 이렇게 정상적으로 값이 넘어온다.

해결해놓고 생각해보니 굳이 위 방법을 사용할 필요 없는 것 같다.

사용자가 요일을 선택하면 해당 요일을 API서버에서 인식할 수 있는 영어 단어로(mon, tue, wed...)로 변환하고

해당 값을 함수호출 시 인자로 주고 해당 인자를 키값으로 사용하면 된다.

왜 구현이 끝나고 생각났을까.