Hybrid/React Native20 리액트 네이티브] 6. 이벤트 리액트 네이티브는 유저 상호작용 이벤트가 많은 편이다. 또한 컴포넌트마다 제공되는 이벤트들도 조금씩 다르다. 그 중 많이 사용되는 이벤트를 본다 1. press press는 웹의 onClick이벤트와 가장 유사한 이벤트이다. Pressable 컴포넌트가 사용할 수 있는 이벤트 종류를 보자. onPress = 터치(Long Press x)시 호출 onPressIn = 터치 시작시 호출 onPressOut = 터치 종료시 호출 onLongPress = 긴 터치 시 호출 로그로 이벤트 호출을 확인해보자. -../component/EventButton.js import React from "react"; import { Pressable,Text } from "react-native"; const EventBu.. 2021. 10. 6. 리액트 네이티브] 5. state 1. state? props는 부모 컴포넌트에서 자식 컴포넌트에게 단순히 값만 전달할 뿐이고 자식 단위에서 수정할 수 없지만, state는 컴포넌트 내부에서 값을 선언하고 내부에서 값을 수정할 수 있다. state란 컴포넌트 내부에서 변화할 수 있는 값을 나타내며 상태가 변하면 컴포넌트는 리랜더링(Rerandering)이 된다. 컴포넌트는 클래스형 컴포넌트와 함수형 컴포넌트가 있는데, 예전에는 함수형 컴포넌트에서 state를 사용할 수 없었지만, 지금은 Hook로 관리가 가능하므로 지금은 함수형 컴포넌트로 코딩하는게 트랜드이다. 2. useState useState는 함수형 컴포넌트에서 상태를 관리할 수 있게 해준다. 예시를 보자. 예시는 변수 관리의 꽃, counter 앱이다. useState의 선언 .. 2021. 10. 5. 리액트 네이티브] 4. props 1. props props는 부모 컴포넌트로부터 자식 컴포넌트에게 전달 혹은 상속되는 속성값을 말한다. 이 값은 자식 컴포넌트에서 활용은 가능하지만 수정은 불가하다. 이 값의 변경이 필요하다면 반드시 부모에서 변경해야만 한다. props 전달 예시를 보자. - ../src/App.js import React from "react"; import { View, Text, Button } from "react-native"; import MyButton from "../component/myButton"; const App = () => { return ( Button Component ); } export default App; -../component/myButton.js import React from.. 2021. 10. 5. 리액트 네이티브 ] 3. 컴포넌트 (책 : 처음 배우는 리액트 네이티브) 컴포넌트는 재사용이 가능한 조립블럭이다. 컴포넌트는 단순히 UI만을 표기하는 것이 아니라 부모의 속성, 자신의 상태에 따라 표현이 달라지고 다양한 기능을 수행한다. 리액트 네이티브는 이 컴포넌트를 통해 화면을 구성한다. 리액트 네이티브는 다양한 내장 컴포넌트를 제공한다. 해당 컴포넌트는 리액트 네이티브 개발자 문서에 다 나와있다. https://reactnative.dev/docs/getting-started Introduction · React Native This helpful guide lays out the prerequisites for learning React Native, using these docs, and setting up your enviro.. 2021. 10. 2. 이전 1 2 3 4 5 다음 반응형
