본문 바로가기

728x90

🚀 Development/React Native12

[React Native] State와 React Hook(useState) - 함수형 컴포넌트와 클래스형 컴포넌트 동적인 데이터 다루기 State 클래스형 컴포넌트에서 동적인 데이터를 다룰 땐 state를 사용한다.(글로벌 변수라고 생각) setState state에 있는 값을 바꾸기 위해서는 무조건 this.setState를 거쳐야한다. 리액트에선 이 함수가 호출되면 컴포넌트가 리렌더링 되도록 설계되어 있기 때문이다. setState는 객체로 전달되는 값만 업데이트 한다 state를 이용한 버튼을 누르면 숫자(number)가 카운트 되는 코드 import React, { Component } from 'react'; import {View, Text, Button} from 'react-native'; class App extends Component { state = { number: 0 }; up = () => { this.setS.. 2023. 6. 15.

[React Native] Props 란? 예제 Props, State는 데이터를 다룰 때 사용되는 개념이다. 리액트는 단방향 데이터 플로우(one-way data flow) props를 받은 자식 컴포넌트는 값을 변경할 수 없고, 상위 컴포넌트로 값을 전달할 수 없다. 하위 컴포넌트에서의 변화로 인해 상위 컴포넌트가 변화해야 하는 경우 상위 컴포넌트에 state를 변경하는 함수를 정의하면 된다. Props는 컴포넌트에서 사용 할 데이터 중 변동되지 않는 데이터를 다룰 때 사용된다. Props props는 부모 컴포넌트가 자식 컴포넌트에게 값을 전달할 때 사용 -> (자식 입장에서) 읽기 전용 자식 컴포넌트에서는 props를 받기만하고, 받아온 prpos를 직접 수정할 수 없다. defaultProps: props에 값을 입력해주지 않았을 때,.. 2023. 6. 15.

React Native 컴포넌트란? / 클래스형 컴포넌트와 함수형 컴포넌트의 특징 컴포넌트란? 컴포넌트는 UI를 독립적이고 재사용 가능하도록 기능 단위별로 나눠 놓은 단위이다. 화면의 구성 요소들은 여러가지 컴포넌트들로 이루어져 있다. 또한, 라이프 사이클 API를 통해 컴포넌트가 화면에 나타날 때, 사라질 때, 변할 때 작업들을 수행할 수도 있다. 주요 컴포넌트 SafeAreaView 상단에 상태 바와 하단에 홈 버튼 영역을 제외한 영역에 콘텐츠를 표시할 때 사용 View 상태바와 홈 버튼 영역까지 콘텐츠 표시 StyleSheet 리액트 네이티브 컴포넌트에 스타일 적용할 때 사용 리액트 네이티브에서 스타일을 적용하기 위해서는 인라인 스타일과 StyleSheet를 사용하는 방법이 있음 ScrollView 화면 스크롤이 가능한 컴포넌트 화면 스크롤이 가능한 컴포넌트로는 FlatList,.. 2023. 6. 15.

[React Native] JSX 란? / JSX 문법 JSX란? JavaScript에서 XML을 추가한 확장형 문법이다. XML(eXtensible Markup Language)은 태그(tag, )의 이름을 자유롭게 짓고 사용할 수 있는 문법이다. 이를 JavaScript에 적용 시킨 것이 바로 JSX이다. 실행하기 전에 코드가 번들링되는 과정에서 바벨을 사용하여 일반 JavaScript 형태의 코드로 변환된다. * 바벨(Babel) 최신 자바스크립트 문법을 모든 브라우저가 이해하지 못하기 때문에, Babel을 통해 브라우저가 이해할 수 있는 문법으로 변환해주는 컴파일러이다. 초기의 바벨은 ES6 코드를 ES5 코드로 변환해 주는 일만 했지만, 현재는 리액트의 JSX문법도 처리해준다. 트렌스파일러는 소스를 입력 받으면 다른 소스로 변환하는 컴파일러의.. 2023. 6. 15.

이전 1 2 3 다음

728x90

티스토리툴바