Java, JavaScript/React, React Native (14) 썸네일형 리스트형 [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 다음
