내마음대로만들어보자/Expo22 state를 이용한 카테고리 기능 사용하기 꿀팁 리스트에서 생활,재테크, 반려견 등 버튼에 따라 보여지는 리스트를 다르게 보여주기 위함! 1. const [cateState, setCateState] = useState([]) 카테고리에 따라 다른 꿀팁들을 보여주기위해 그떄그때 저장 관리할 상태 2. useEffect(()=>{ //뒤의 1000 숫자는 1초를 뜻함 //1초 뒤에 실행되는 코드들이 담겨 있는 함수 setTimeout(()=>{ //꿀팁 데이터로 모두 초기화 준비 let tip = data.tip; setState(tip) setCateState(tip) setReady(false) },1000) },[]) 3. const category = (cate) => { if(cate == "전체보기"){ //전체보기면 원래 꿀팁 데이터를.. 2021. 9. 8. 컴포넌트와 상태를 이용한 로딩화면 만들기 앱 운영에 있어서 로딩화면은 자주사용되고 있으므로 확실히 이해하고 넘어가자. 오류 발생원인은 화면은 그려졌는데 준비된 데이터가 없는경우 발생한다. Loading.js 에 간단한 로딩화면을 만들어보자. import React from 'react'; import {View,Text,StyleSheet} from 'react-native'; export default function Loading(){ return( 준비중입니다... ) } const styles = StyleSheet.create({ container: { //앱의 배경 색 flex:1, justifyContent:'center', alignItems:'center', backgroundColor: '#fdc453', }, title: {.. 2021. 9. 7. 상태(useState)와 useEffect 컴포넌트마다 데이터를 보유하고 관리할 수 있는데 리액트에서는 이를 상태 라고한다. 리액트에서는 상태(state)는 리액트 라이브러리에서 제공해주는 useState로 생성하고 setState 함수로 변경할수있다. 1. useState 리액트는 이 상태(state)로 관리되는 데이터가 변경되면 화면이 변경되게 된다. (화면에 데이터에 따라 변경된다) UI = component(state) 즉, 사용자 화면 (UI)는 컴포넌트(component)에 어떤 데이터(state)가 주입되고 변경되냐에 따라 변화된다라는 뜻! 2. useEffect useEffect는 리액트에서 자주 사용되는 기본함수이다. *기본형태 useEffect (() => { 화면이 그려진 다음 가장 먼저 실행항 코드 작성 } , []}) 보통.. 2021. 9. 7. 속성(props) 속성은 간단히 말하면 컴포넌트에 데이터를 전달하는 것이다. (전달 형태는 키와 벨류) 말줄임표 효과를 줄때 numberOfLines 이미지영역을 차지하는 방식은 resizeMode 위 친구들은 엘리먼트 요소들이 원래 가지고 있는 속성이라고 보면되고 이런것들은 공식문서에 다 나와있다! 예를들어, 컴포넌트에 속성이 존재하며, 내가 부여하는대로 속성이 만들어진다. 라고 속성을 써 넣으면, 컴포넌트는 image라는 속성이름에 {'이미지 주소'} 라는 값을 가지게 된다. 속성이름 : 키 이미지 주소 : 벨류 위와같이 MainPage.js 에서의 Card.js 컴포넌트 속성(데이터)를 부여해줄때 키와 벨류 형태(content={content}) 로 전달 해줘야한다! 또한, 컴포넌트를 반복문 돌릴때는 컴포넌트마다 고.. 2021. 9. 7. 이전 1 2 3 4 5 6 다음
