내마음대로만들어보자326 컴포넌트와 상태를 이용한 로딩화면 만들기 앱 운영에 있어서 로딩화면은 자주사용되고 있으므로 확실히 이해하고 넘어가자. 오류 발생원인은 화면은 그려졌는데 준비된 데이터가 없는경우 발생한다. 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. 컴포넌트 앱 개발에 필요한 필수 기초지식 중 하나로 컴포넌트에 대해 알아보자. 페이스북 앱을 보면 쉽게 내용이 이해가 간다. 버튼, 화면 , 내용 등등 무수히 많은 컴포넌트로 구성이 되어 있다. 즉, 컴포넌트(Component)는 정해진 엘리먼트들로 만들어진 화면의 일부분 모두를 가르킨다. 그림을 간단히 이해해보자면, 무수히 많은 컴포넌트들에서 데이터를 전달받고 그 데이터를 관리한다고 보면된다. 컴포넌트에서 데이터를 관리하고 유지하는 방법은 State 상위 컴포넌트에서 하위 컴포넌트로 데이터를 전달하는 방식은 Props 이며, 하위 컴포넌트에서 상위 컴포넌트로 데이터를 전달할 순 없다. 그리고 useEffect 라고 화면에 컴포넌트가 그려지면 처음 실행해야하는 함수들을 모아둔 곳으로 알아두고 넘어가자! 1. 컴포.. 2021. 9. 6. 이전 1 ··· 31 32 33 34 35 36 37 ··· 82 다음
