원강민의 Wonhada 블로그

Category

리액트 네이티브

재사용 가능한 React Native 컴포넌트

원문: https://blog.callstack.io/reusable-react-native-components-7c29870fb2e6#.7azfeaf3n 재사용 가능한 React Native 컴포넌트 와(and) 다른 방법으로 정의하는 방법 React Native에 익숙하지 않은 대부분의 사람들은 재사용할 수 있는 컴포넌트를 정의하는 간단한 방법을 찾는 것이 매우 어렵습니다. 이 문서는 개발 프로세스 중에 보다 적은 노력으로 보다 효율적인 코드를… Continue Reading →

ReactJS: Props와 State 비교

원문: http://lucybain.com/blog/2016/react-state-vs-pros/ ReactJS: Props vs. State 저는 직장에서 최근에 Redux와 함께 ReactJS를 사용했고, 어떻게 함께 사용할 수 있을까에 대해 꽤 많이 고민하고 있습니다. 사실 처음엔 몇 가지 React에 대한 궁금증을 해소하고자 작게 시작하려고 했습니다. “props vs. state” 질문은 React 입문자에게는… Continue Reading →

추가 리소스들

이 튜토리얼을 방금 다 읽었다면 매우 멋진 React Native 앱을 만들 수 있었을 것입니다. 그러나 React Native는 단지 한 회사가 만든 제품이 아니라 수천 명의 개발자 커뮤니티입니다. 따라서 여러분이 React Native에 관심을 가지고 체크 아웃할 만한 관련 자료를 소개해드립니다. 인기… Continue Reading →

네비게이터 사용하기

모바일 앱은 대부분 한 화면만으로 구성되지 않습니다. 앱에 두 번째 화면을 추가하자마자 사용자가 한 화면에서 다른 화면으로 이동하는 방법을 고려해야 합니다. 네비게이터를 사용하여 여러 화면 사이를 전환할 수 있습니다. 이러한 전환은 마스터/디테일 스택 또는 세로 모달 팝업을 통해 일반적인 측면… Continue Reading →

네트워킹[Networking]

많은 모바일 앱은 원격 URL에서 리소스를 로드해야 합니다. REST API에 대한 POST 요청을 작성하거나 다른 서버에서 정적 컨텐츠 청크를 가져와야 할 수 있습니다. Fetch 사용하기 React Native는 네트워킹 요구에 맞는 Fetch API를 제공합니다. 이전에 XMLHttpRequest 또는 다른 네트워킹 API를 사용해… Continue Reading →

리스트뷰 사용하기

ListView 컴포넌트는 다르지만 비슷하게 구조화 된 데이터를 세로 스크롤 리스트로 표시합니다. ListView는 시간이 지남에 따라 항목 수가 늘어날 수 있는 긴 데이터 목록에 적합합니다. 보다 일반적인 ScrollView와 달리 ListView는 현재 모든 요소가 화면에 표시되는 요소만 렌더링합니다. ListView 컴포넌트에는 dataSource 및… Continue Reading →

스크롤뷰 사용하기

ScrollView는 여러 컴포넌트와 뷰를 호스팅할 수 있는 일반 스크롤 컨테이너입니다. 스크롤 가능한 항목은 같은 종류가 아니어도 되며 세로 및 가로(horizontal 속성을 설정하여)로 스크롤 할 수 있습니다. 이 예제는 이미지와 텍스트가 혼합된 수직 ScrollView를 만듭니다. 1234567891011121314151617181920212223242526272829303132333435363738394041424344454647import React, { Component } from… Continue Reading →

텍스트입력 처리하기

TextInput은 사용자가 텍스트를 입력할 수 있는 기본 컴포넌트입니다. 텍스트가 변경될 때마다 호출되는 함수를 사용하는 onChangeText prop과 텍스트 제출(Submit)시 호출되는 함수를 사용하는 onSubmitEditing prop이 있습니다. 예를 들어, 사용자가 입력할 때 단어를 다른 언어로 번역한다고 가정해 봅시다. 이 새로운 언어에서는 모든 단어가… Continue Reading →

Flexbox를 이용한 레이아웃

컴포넌트는 flexbox 알고리즘을 사용하여 하위 요소의 레이아웃을 지정할 수 있습니다. Flexbox는 다양한 화면 크기에서 일관된 레이아웃을 제공하도록 설계되었습니다. 일반적으로 flexDirection, alignItems 및 justifyContent의 조합을 사용하여 적절한 레이아웃을 얻습니다. Flexbox는 웹상의 CSS와 마찬가지로 React Native에서 동일한 방식으로 작동하지만 몇 가지 예외가… Continue Reading →

Height와 Width

컴포넌트의 높이(Height)와 너비(Width)가 화면의 크기를 결정합니다. 고정 치수(Fixed Dimensions) 컴포넌트의 크기를 설정하는 가장 간단한 방법은 고정 너비와 높이를 스타일에 추가하는 것입니다. React Native의 모든 치수는 단위가 없으며 밀도와 무관한 픽셀을 나타냅니다. 12345678910111213141516import React, { Component } from ‘react’; import {… Continue Reading →

스타일[Style]

React Native를 사용하면 스타일을 정의할 때 특별한 언어나 구문을 사용하지 않아도 됩니다. 자바스크립트를 사용하여 앱의 스타일을 정의할 수 있습니다. 모든 핵심 컴포넌트에는 스타일(Style)이라는 prop이 적용됩니다. 스타일 이름과 값은 일반적으로 CSS가 웹에서 작동하는 방식과 일치합니다. 단, 이름은 캐멀 케이스(camel casing)를 사용하여… Continue Reading →

상태[State]

컴포넌트를 제어하는 두 가지 유형의 데이터가 있습니다: props와 state. props는 부모에 의해 설정되며 컴포넌트의 수명 내내 고정됩니다. 변경될 데이터의 경우 state를 사용해야 합니다. 일반적으로 생성자에서 상태를 초기화한 다음 변경하려는 경우 setState를 호출해야 합니다. 예를 들어, 항상 깜박이는 텍스트를 만들고 싶다고… Continue Reading →

Props

대부분의 컴포넌트는 다른 매개 변수와 함께 작성될 때 사용자 정의 할 수 있습니다. 이러한 생성 매개 변수를 ‘props’라고 합니다. 예를 들어, 하나의 기본 React Native 컴포넌트는 이미지(Image)입니다. 이미지를 만들 때 source라는 이름의 prop을 사용하여 이미지의 모양을 제어할 수 있습니다. 123456789101112131415import… Continue Reading →

튜토리얼

React Native는 React와 비슷하지만 웹 컴포넌트 대신 네이티브 컴포넌트를 사용합니다. React Native 앱의 기본 구조를 이해하려면 JSX, 컴포넌트, state 및 props와 같은 기본 React 개념을 이해해야 합니다. React를 이미 알고 있다면, 네이티브 컴포넌트와 같은 React-Native 특화된 것들을 알아야 합니다. 이… Continue Reading →

© 2019 원강민의 Wonhada 블로그 — Powered by WordPress

Theme by Anders NorenUp ↑