React-native

Infinite Flatlist + Firebase 연동하기

## 추가 작업 할 것들 : 1. SearchBar 연동하기 2. return문 안의 내용구성을 Card.js로 컴포넌트화 시키기 ------------------------------------------------------------------------------------ 1. 설치파일 ㄱ. firebaseConfig.js 만들어주기 ( 참고링크 : https://radpro.tistory.com/37 ) ㄴ. firebase에 프로젝트 만들고, realtime database의 개인 API 받아오기 ( 참고링크 : https://radpro.tistory.com/38 ) ㄷ. iframe.js 컴포넌트 만들어주기 ( 참고링크 : https://radpro.tistory.com/22 ) 2. 기..

[실패일지] ScrollView를 Infinite Flatlist로 대체하기

1. 목적 : Scrollview가 구현은 편하지만, 로딩이 너무 길다. 인스타나 쇼핑앱 같은 무한 스크롤을 구현하는 것이 데이터 관리도 쉽다. 무엇보다도 FlatList에대한 이해도가 떨어진다. 처음부터 다 뜯어보며 이해해보자. (ScrollView와 Flatlist을 상황에 따른 사용목적이 다르기 때문) **중간점검 : 애당초 ScrollView + map함수가 한 쌍이다. FlatList는 map함수를 쓰지 않는다. 즉, 기존에 firebase.js에서 map함수로 firebase의 json데이터를 받아, card.js로 렌더링 하던 것을 다 갈아 엎어야 할거같다. Flatlist의 경우, data=[ ] 로 데이터를 받아, renderItem으로 렌더링 해주는 것. 새로만들게 생겼다. 이것도 다 ..

기본 학습

용어 JSX : Javascript에 XML을 추가한 확장한 문법. JSX는 리액트로 프로젝트를 개발할 때 사용되므로 공식적인 자바스크립트 문법은 아니다. 브라우저에서 실행하기 전에 바벨을 사용하여 일반 자바스크립트 형태의 코드로 변환된다. 컴포넌트 : 재사용이 가능한 조립 블록으로 화면에 나타나는 UI 요소. UI역할 뿐만 아니라, 부모로 부터 받은 속성Props나 자신의 상태Status에 따라 표현이 달라지고 다양한 기능 수행. Axios : react, react-native 에서 API 로 부터 데이터를 받아올 때 사용. fetch 에는 존재하지 않는 기능이 좀 더 많다. (공식문서 : https://axios-http.com/docs/intro ) (학습링크 : https://kyun2da.de..

[실패일지] 부모컴포넌트에서 자식 컴포넌트로 props 전달하기

진즉부터 쓸걸 그랬다. 처음엔 막히는 부분도 금방금방 해결하니 시원하게 넘어갔지만, 코드가 복잡해지고, 알량한 배경지식이 밑천을 드러내고, 구글링을 해도 답이 나오지 않는 단계에 들어설수록 시행착오가 늘어난다. 시행착오가 늘어날수록, 시도했던 잘못된 방법을 다시 시도하는게 늘어나면서 시간적 손실도 커지고, 기억도 왜곡되면서 효율이 떨어진다. 이제는 실패일지를 작성하면서 왜 실패했는지, 왜 성공한건지 기록을 하려한다. 1퍼센트의 쾌감만 기억하지 말고, 99의 노력을 기억하자...! ------------------------------------------------------------------------------------------------------------------------ 목표 : F..

map함수 돌리는 화면에서 onPress로 경로열기 (Flatlist완성으로 보류)

이번엔 전에 했던 방식인 [ 부모컴포넌트에서 json데이터를 받아 map함수를 돌려 리스트를 작성하고, 리스트에 들어갈 Card.js라는 자식 컴포넌트를 onPress로 반응함으로서 경로는 여는 방식 ]과 다르게 부모컴포넌트에서 onPress 반응을 받아 경로를 여는 방식을 구현했다. (3일을 공쳤다...) 우선 요약하자면, 1. 자식컴포넌트에서 Card전체를 감쌌던 태그를 태그로 대체해주고, 부모컴포넌트의 map함수 안에 있는 return값에 태그를 씌워준다. 2. 그리고 안에 onPress를 넣음으로서 반응형 구현한다. 3. onPress에 반응할 함수를 작성해준다. 장점 : Card.js라는 자식컴포넌트에선 url밖에 못연다. (즉, webView형식밖에 못연다는 얘기) 그러나 이렇게 구동하면, 부..