본문 바로가기

프론트 엔드/React Native3

React Native 알라딘 open api 사용 알라딘 상품 리스트 api 를 이용해서 베스트셀러를 추천하는 부분을 만들었는데 const Recommend = () => { const [bookApiObj, setBookApiObj] = useState({ title: "", author: "", description: "", cover: "", }); const [etcBookImg, setEtcBookImg] = useState([]); const getBooks = async () => { try { const bookApi = await axios.get( `http://www.aladin.co.kr/ttb/api/ItemList.aspx?ttbkey=[생성된키값]&QueryType=BlogBest&start=1&MaxResults=10&Sea.. 2023. 1. 10.
React Native 공부중 React Native ToDo 앱 만들기 AsyncStorage 사용 const saveTodos = async (toSave) => { await AsyncStorage.setItem(STORAGE_KEY, JSON.stringify(toSave)); }; const getToDos = async () => { const s = await AsyncStorage.getItem(STORAGE_KEY); setToDos(JSON.parse(s)); }; AsyncStorage 를 사용해서 JSON.stringify( )를 사용해서Todo를 저장하고 저장된 Todo를 JSON.parse( )를 사용해서 앱이 다시 켜졌을 때 불러올수 있는 방법을 배웠는데 저번 프로젝트에서 사용했던 로컬스토리에 저장하는 경험.. 2023. 1. 4.
12/30 TIL(React Native) React Native : 인터페이스로 우리의 운영 체제(ios, 안드로이드...) 사이에 있는 것 Raact Native 로 코드를 작성하면 ios 또는 JAVA 안드로이드 코드로 번역이 됨. ex) React Native 로 버튼 컴포넌트를 만드면 ios 나 안드로이드에 '버튼을 만들어줘' 라는 메세지로 요청을함 요청을 받은 운영체제는 버튼을 생성하는데 ios와 안드로이드의 버튼 생김새가 달라 보여지는 UI에서 차이가남 React Native 에서는 브라우저가 없고 bridge 라는 것이 존재 React Native 로 코드를 작성하면 bridge로 운영체제에 요청을 보내는 방식 작동원리를 살펴보면 위 사진을 보면 우리가 작성해야 하는 코드 부분은 JS 부분만인 유일하게 React Native 공부하.. 2022. 12. 31.