React Native

React Native 0.76에서 변경된 기능들

1. 서론 React Native 0.76부터 새로운 Architecture가 기본으로 활성화되었다. 이 글에서는 React Native 0.76의 새로운 기능과 주요 변화 사항을 소개하겠다.2. 새로운 Architecture의 등장 React Native의 새로운 Architecture는 기존 아키텍처의 문제를 해결하고, React 18의 기능을 완벽하게 지원할 수 있도록 설계되었다. react 18에서 그랬듯이, react native 0.76의 핵심 주제도 concurrent인 것 같다. 기존 아키텍처는 bridge를 통해 JavaScript와 네이티브 플랫폼 간의 통신을 비동기적으로 처리했다. 이 방식은 메인 스레드의 부하를 줄이는 데는 효과적이었지만, 비동기 처리만 가능했기 때문에 사용자 입력에..

React Native에서 Routing: React Navigation 사용법

리액트 네이티브는 네이티브 앱처럼 화면을 전환하고, 상태를 관리하기 위해 강력한 네비게이션 라이브러리가 필요하다. React Navigation은 이러한 요구를 충족시키는 가장 많이 사용되는 라이브러리 중 하나이다. 다양한 네비게이션 패턴(스택, 탭, 드로어 등)을 지원하며, 복잡한 앱 구조에서도 간단하고 효율적으로 화면 이동을 처리할 수 있다. 이 글에서는 react-navigation의 주요 기능과 사용 방법을 살펴보자.React Navigation React Navigation은 리액트 네이티브에서 스크린 간의 전환과 상태 관리를 효율적으로 처리하기 위한 라이브러리이다. 이 라이브러리를 사용하면 여러 화면 사이에서 쉽게 이동할 수 있고, 스택 네비게이션, 탭 네비게이션, 드로어 네비게이션 등 다양한..

React Native에서의 View 컴포넌트

리액트 네이티브에서 View 컴포넌트는 모든 UI 레이아웃의 기본 구성 요소이다. 화면에 다양한 요소들을 배치하고 관리하기 위해 사용하는 가장 중요한 컨테이너로, HTML의 와 비슷한 역할을 한다. 이 글에서는 View 컴포넌트의 기본적인 사용법과 다양한 레이아웃 속성들을 살펴보며, 리액트 네이티브의 레이아웃 시스템을 이해하고 효과적으로 활용하는 방법을 설명한다.View의 기본 사용법 View는 기본적으로 화면의 다른 요소들을 포함하는 역할을 한다. 별도의 속성이나 스타일을 설정하지 않으면 아무런 효과가 나타나지 않으므로, 주로 스타일과 함께 사용된다.import React from 'react';import { View, Text } from 'react-native';const App = () => ..

React Native에서 Text Input과 키보드 처리하기

리액트 네이티브에서 텍스트 인풋(TextInput)은 사용자와 상호작용을 위한 가장 기본적인 요소 중 하나이다. 하지만, 텍스트 인풋을 사용할 때 키보드가 화면을 가리는 문제가 발생할 수 있어 이를 적절히 처리하는 방법을 알아두는 것이 중요하다. 이 글에서는 TextInput의 주요 속성과 키보드 처리 방법에 대해 설명하고, 예제 코드를 통해 적용 방식을 소개한다.TextInput의 기본 사용법 TextInput은 사용자의 입력을 받을 수 있는 기본 컴포넌트이다. 가장 기본적으로는 placeholder 속성을 사용해 입력 필드에 안내 문구를 넣을 수 있다.이 코드는 간단하게 텍스트 입력을 받는 기본적인 텍스트 인풋 필드를 만들어준다.유용한 TextInput 속성들 TextInput에는 다양한 속성을 통해..