[react-native] HTML → 전환 시 주의사항

 

기존 HTML을 React Native 컴포넌트로 변환해야 한다. React Native는 컴포넌트 개념으로 돌아가기 때문에

뭔가 잘 쪼개서 바꾼다고 생각하면 될 것 같다. 전환해야 할 주요 컴포넌트는

 

 

1. HTML을 React Native 컴포넌트로 변환

<div> → <View>
<span>/<p> → <Text>
<img> → <Image>
<button> → <TouchableOpacity> or <Button>

 

2. CSS를 React Native 스타일로 변환

import React from 'react';
import { View, Text, StyleSheet, Button, Alert } from 'react-native';

const App = () => {
  return (
    <View style={styles.container}>
      <Text style={styles.header}>Hello, World!</Text>
      <Text style={styles.content}>This is a sample content.</Text>
      <Button
        title="Click Me"
        onPress={() => Alert.alert('Button clicked!')}
      />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    padding: 20,
  },
  header: {
    fontSize: 24,
    fontWeight: 'bold',
  },
  content: {
    marginTop: 20,
  },
});

export default App;

 

3. 이미지와 링크 변환

import React from 'react';
import { View, Text, Image, Linking, StyleSheet, TouchableOpacity } from 'react-native';

const App = () => {
  return (
    <View style={styles.container}>
      <Image
        source={{ uri: 'https://example.com/image.jpg' }}
        style={styles.image}
      />
      <TouchableOpacity onPress={() => Linking.openURL('https://example.com')}>
        <Text style={styles.link}>Visit Example</Text>
      </TouchableOpacity>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    padding: 20,
  },
  image: {
    width: 200,
    height: 200,
  },
  link: {
    color: 'blue',
    marginTop: 20,
  },
});

export default App;

 

그 외의 컴포넌트는 공식문서(https://reactnative.dev/docs/native-components-android) 참조