리액트 네이티브 기본 사용법

리액트 네이티브 앱의 구조는 리액트와 유사하지만, 모바일에서 동작하도록 설계된 네이티브 컴포넌트를 빌딩 블록으로 활용합니다. 앱을 만들기 위해선 먼저 JSX 문법에 익숙해져야 합니다. JSX는 자바스크립트 안에 UI 요소를 직관적으로 정의할 수 있도록 해줍니다. 예를 들어 <View>는 웹의 <div>와 비슷하며, 화면을 구성하는 핵심 역할을 합니다. <Text>는 글자를 표시하는 데 쓰입니다.

컴포넌트는 앱을 구성하는 가장 작은 단위이며, 각각 독립적인 기능과 UI를 가지도록 설계됩니다. 예시로 단순한 화면 출력부터 사용자 입력 처리까지 다양하게 확장할 수 있습니다. 컴포넌트 간 데이터 전달에는 props를 활용하고, 내부 상태 관리에는 state를 사용합니다. 이런 설계 방식 덕분에 복잡한 화면도 여러 컴포넌트를 조합해 직관적으로 빌드할 수 있습니다.

스타일링과 레이아웃 잡기

리액트 네이티브는 CSS 파일을 별도로 작성하지 않고, 자바스크립트 객체 형태로 스타일을 지정합니다. 대부분의 컴포넌트는 style prop을 받아들입니다. 스타일 이름은 backgroundColor, fontSize처럼 camelCase 형태로 작성해야 하며, 값에는 px나 em과 같은 단위를 붙이지 않습니다. 다음 예처럼 사용할 수 있습니다.

<View style={{ flex: 1, backgroundColor: 'white', justifyContent: 'center' }}>
  <Text style={{ color: 'black', fontSize: 20 }}>Hello, React Native!</Text>
</View>

더 복잡한 스타일을 반복적으로 재사용하고 싶다면, StyleSheet.create()로 스타일 객체를 미리 정의한 뒤 일관성 있게 사용할 수 있습니다. 레이아웃은 주로 flexbox를 기반으로 하므로, 웹 개발 경험이 있다면 자연스럽게 적응할 수 있습니다. margin, padding, border 등 익숙한 속성들도 모두 지원합니다.

리액트 네이티브만의 특징

웹에서 흔히 쓰던 <div>, <span>, <button>은 리액트 네이티브에선 <View>, <Text>, <TouchableOpacity> 등으로 대체됩니다. 이러한 네이티브 컴포넌트들은 플랫폼에 맞게 렌더링되어 iOS와 안드로이드 모두에서 자연스럽게 동작합니다. 앱의 품질을 결정짓는 요소는 핵심 로직뿐 아니라, 화면의 레이아웃과 스타일링에서도 만들어짐을 기억해야 합니다.

컴포넌트 기반 구조와 자바스크립트 스타일링 방식을 익히면, 리액트 네이티브의 강점을 가장 효과적으로 활용할 수 있습니다. 이제, 실제 프로젝트에 이런 요소들을 유연하게 결합하며 나만의 앱 화면을 확장해보세요.