Java, JavaScript (33) 썸네일형 리스트형 [React Native] Props는 어떻게 사용할까? props는 state와 마찬가지로 리액트 네이티브에서 구성 요소를 제어하는 데이터 유형 중에 하나이다. 하지만 state와 다른 점은 props는 정적인 데이터를 다룰 때 주로 사용된다는 점이다. props에 대해 말하면 상위 컴포넌트에서 하위 컴포넌트로 값을 전달하는 것이다. 오늘 기본 화면은 깔끔하게 아무것도 안했다. 차라리 색깔을 안넣는게 더 깔끔하고 잘된 것 같다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 import React, { Component } from 'react'; import { Text, View, StyleSheet, Button } from 'react-native'; export default c.. [React Native] State는 어떻게 사용할까? state는 리액트 네이티브에서 구성 요소를 제어하는 데이터 유형 중에 하나이다. state는 동적인 데이터를 다룰 때 주로 사용된다. state의 값을 바꾸고 싶다면 setState함수를 사용하여 바꿀 수 있다. 여기서 중요한 점은 setState가 호출될 때마다 해당 컴포넌트가 있는 뷰들은 다시 랜더링을 하게 된다. 이것은 state를 필요하지 않다면 너무 많이 선언하지 말라는 것과 같다. 불필요한 state는 너무 많은 뷰를 랜더링 하게 하기 때문이다. state변수는 setState를 통해서 값을 바꾸어준다. setState가 호출되면 해당 컴포넌트가 있는 뷰는 다시 랜더링하게 된다. 너무 많은 state는 앱의 기능 저하로 이어질 수 있다. 오늘의 기본 화면이다. 갑자기 개구리 생각이 나서 녹색.. [React Native] TextInput으로 텍스트 입력을 보여주자 InputText에 대한 이해가 부족한 상태로 To Do 앱을 만들려고 했다가 실패했다. InputText에 입력된 값을 가져오는 것을 어떻게 구현해야 할지 이해가 부족해서 그런 것 같다. 그래서 오늘은 InputText에 대해 공부해봤다. 오늘은 사용자가 TextInput에 텍스트를 입력하고 제출버튼을 누르게 되면 따로 만들어놓은 뷰에 사용자가 입력한 정보를 보여주는 것을 만들 것이다. style InputText에 스타일을 적용시켜주는 것이다. onChangeText InputText 안의 글자가 바뀔 때마다 호출되는 콜백이다. 텍스트는 단일 문자열 인수로 콜백 핸들러에 전달된다. ← 이거 중요하다 ★★★★★ placeholder InputText 안에 무엇을 입력해야하는지 힌트를 주는 것이다. 아래.. [React Native]FlatList 인터페이스 구현 리스트뷰에 대한 React Native 기능을 찾아보다가 FlatList를 찾았다. FlatList는 한 번에 모든 아이템의 뷰를 렌더링 하지 않고 사용자가 보고 있는 화면만을 렌더링 하여 메모리 사용에 더 효율적이라고 한다. data 표시할 정보에 대한 정보를 저장하기 위해 사용한다. renderItem 항목을 가져와 화면에 렌더링해준다. keyExtractor 항목의 고유한 키를 지정해주는 데 사용된다. DATA 배열 변수에 값들을 미리 선언해주었다. 이 값들은 설정해놓은 순서에 의해 화면에 렌더링 되게 될 것이다. key: 고유 키를 저장하는 변수 name: 이름을 저장하는 변수 major: 전공을 저장하는 변수 order: 순서를 저장하는 변수 name, major, order를 변수로 받고 출력.. [React Native] button을 만들어보자 어떠한 프로그램을 만들던 레이아웃이 있다면 버튼은 필수적으로 구현하고 자세하게 알아야 한다. 그래서 리액트 네이티브를 공부하는 입장에서 button을 만드는 방법에 대한 궁금증이 생겼고, React Native 홈페이지에서 찾아볼 수 있었다. onPress 사용자가 버튼을 눌렀을 때 호출되는 핸들러 title 버튼에 표시할 텍스트 color 배경 색상(android), 텍스트 색상(ios)을 설정 해준다. disabled 참인 경우 구성 요소에 대한 모든 동작이 작동하지 않는다. TouchableOpacity 버튼의 불투명도를 줄여 사용자가 버튼을 누른 상태에서 배경을 볼 수 있게 해 준다. TouchableOpacity의 기능은 위와 같지만 사실 TouchableOpacity는 커스텀 버튼을 만들기 위.. [React Native] Flexbox를 이용한 레이아웃 - (2) (1)에서 설명하지 못했던 나머지 속성들에 대해서 설명하겠습니다. (1)과 마찬가지로 설명에 앞서 기본 설정 코드를 보여드리겠습니다. 이렇게 코드를 전부 작성하게 되면 아래의 그림과 같은 화면이 나올 것입니다. 화면이 정상적으로 작동되었으면 먼저 flexWrap 속성에 대해서 설명하겠습니다. flexWrap은 자식 컴포넌트가 기본 축을 따라 컨테이너의 크기를 초과했을 때 어떻게 제어할 것인지에 대해 설정해주는 속성이다. 속성 추가는 부모 컴포넌트에 해주고, 기본 코드의 부모 컴포넌트 스타일은 styleContainer이다. wrap 자식 컴포넌트들을 줄 바꿈 하여 배치해준다. nowrap 자식 컴포넌트들을 1줄로 배치해준다. 여기서 nowrap은 기본 설정으로 별다른 설정을 하지 않으면 자식 컴포넌트들은.. [React Native] Flexbox를 이용한 레이아웃 - (1) 리액트 네이티브 UI 디자인을 위해서는 Flexbox에 대한 이해가 필수적으로 필요하다고 생각해서 리액트 네이티브 공식 홈페이지에 있는 예제를 통해서 공부해보았다. 예제들을 설명하기 앞서 맨 처음 코드에 대해 설명하겠다. React Native와 TypeScript는 글 게시 기준으로 시작한 지 하루밖에 되지 않아서 설명에 있어 부족함도 있고, 잘 모르는 부분이 많습니다. 양해 부탁드립니다. 아래 코드는 App.tsx에 대한 기본 코드 설정이다. 먼저 flex에 대해 설명하겠다. flex는 쉽게 설명하자면 레이아웃에서 얼마큼 자리를 차지할 것인지에 대해 나타내 주는 것이다. style1, style2, style3에 width값을 주석 처리해주고 style1에는 flex:1을 추가, style1에는 fl.. [React Native] expo와 typescript로 실행하기 밑의 링크를 들어가서 시키는 대로 다 하면 너도 React Native 개발자! https://reactnative.dev/docs/environment-setup React Native · A framework for building native apps using React A framework for building native apps using React reactnative.dev 이전 1 2 3 4 5 다음
