[react-native] json가져와서 일단 예쁘게 꾸미기

 

 

오늘의 목표는 ▶▶

 

1) 이전 포스팅에서 엑셀 파일을 json 파일로 바꾼 것을 임포트(import)해서 리스트에 뿌리기

2) 뿌려진 리스트를 보기 좋게 꾸미기

 

 

 

 

 

json파일을 import해서 리스트에 뿌리기

---

우선 변환된 json 파일을 작업하고 있는 폴더에 넣어야 한다.

 

왼쪽 메뉴에서 아무것도 없는 부분을 클릭한 후 [오른쪽 마우스 - NewFile]을 클릭하여

새로운 파일(data.json)을 만든다.

 

 

 

 

 

만들어진 data.json 파일에 json으로 만든 전국 언어치료센터 데이터를 복사+붙여넣기 한다.

데이터가 잘 들어간 것을 확인 후, 상위 center_info로 모든 데이터를 묶어준다. (원하는 명칭 아무거나 가능)

이렇게 묶는 이유는 나중에 firebase 함수로 데이터에 접근하기 쉽게 하기 위해서 폴더화(?)를 시켜주는 것!

 

 

 

 

그리고 Main 페이지로 가서 아래의 빨간 박스 모양처럼 data.json 파일을 import(가져오는것) 시켜준다.

 

 

 

 

현재 파일에서 다른 파일에 있는 재료들(예를 들면 함수라던가 데이터라던가)을 쓰기 위해서는

import를 사용해서 '나 이제 그 파일 쓴다?'라고 알려줘야 하는데, 다른 파일이 있는 위치를 잘 써줘야 제대로 불러올 수 있다.

 

파일 경로를 찾을 때 두 파일이 위치(저장되어 있는 곳)에 따라 다르게 작성하는데,

프로젝트 안에 파일이 둘다 같은 위치에 저장되어 있다면 아래와 같이 점은 하나(./)만 붙인다.

 

 

 

만약 pages와 같이 폴더 아래 파일이 있다면 아래와 같이 점은 두 개(../)를 붙인다.

 

 

 

지금 만들고 있는 프로젝트도 pages 폴더 안에 Main.js파일을 만든 거라 import할 때도 ../data.json으로 불러왔다.

 

 

여기까지 하면 아래와 같이 json 데이터를 잘 불러올 것이고, 이제 보여지는 것을 꾸며줄 차례다.

 

 

 

 

 

 

뿌려진 리스트 예쁘게 꾸미기

---

scrollview width를 100%.

하위 card container width를 95%로 해서 양 옆 공간만듦.

주소Text에 numberOfLines={1}로 주소 한줄만 나오게.

적당한 곳에 backgroundcolor로 입혀주기.

색상 선택이 미스인가? 왜이렇게 안이쁘지..ㅋㅋㅋㅋㅋㅋㅋ

 

암튼 이제 디테일페이지 만들면 된다!!