rn state

state는 컴포넌트 내부에서 생성되고 값을 변경할 수 있다.

import {a} from 경로 와

import a from 경로의 차이

전자는 export a; 했을 경우
후자는 export default(임의 변수명)를 하였고 import한 파일에서 변수명을 다시 정하고 싶을 때

전자의 경우 변수명을 변경하고 싶으면

import {b as a} from 경로 로 변경 가능

커스텀 버튼 컴포넌트 만들 시 onPress에 대한 prop설정 해줘야 함

<TouchableOpacity 
        style={{
            backgroundColor:'#3498db',
            padding:16,
            margin:10,
            borderRadius:8,
        }} onPress={()=>alert(props.onPress())}> //여기

useState 사용

import React,{ useState } from 'react'; //임포트

const [count, setCount] = useState(0); 초기값 할당 및 상태관리 변수와 세터 반환 구조분해 할당 참고

사용 {count}

상태 변경 setCount(count+1) //count = count+1

참고: https://dudghsx.tistory.com/18

onPress 이벤트

웹에 onclick 속성과 비슷하다

TouchableOpacity 에서 터치 흐름

onPressIn -> onPressOut -> onPress ->onLongPress 순으로 호출

여기서 onPressIn -> onPressOut 는 항상 호출되나

onPress ->onLongPress 는 둘중 하나만 호출된다.

onLongPress 호출시간 조정하려면
delayLongPress ={3000} //3초
이런식으로 속성을 설정

onChange 이벤트

변화를 감지하는 이벤트

const [text ,setText] = useState("");
onChange={event =>setText(event.nativeEvent.text)}

onChange 가 보내는 인자 

onChange 인자로 어떤 타입들이 넘어오나요?
https://reactnative.dev/docs/textinput#onchange

귀찮게 event.nativeEvent를 안쓰는 방법

onChangeText 이벤트

를 사용하면 인자 자체가 text로 넘어온다 즉

 const [text ,setText] = useState("");
onChange={text =>setText(text)}

이런 처리가 가능하다.

pressable 컴포넌트

TouchableOpacity 대체 컴포넌트 0.63 이상에서 사용가능

기존에 있던 모든 기능이 존재하고 다른 특징은 HitRect와 PressRect 속성