최근에 저는 React Nexus에서 "접근성 및 TV 앱"에 관해 강연했습니다. 제가 계속 받았던 질문 중 하나는 "ReactJS 개발자로서 React Native를 시작하는 것이 얼마나 쉬운가요?"였습니다.

요컨대 ReactJS 개발자라면 React Native로 시작하는 것이 쉬울 것입니다.

이번 블로그에서는 ReactJS 개발자가 React Native에서 사용할 수 있는 5가지 기능을 공유하겠습니다.

1. 구성품

React Native에서는 ReactJS에서 수행하는 것과 유사한 구성 요소를 생성합니다. 개념과 모범 사례는 동일하게 유지됩니다.

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

const GreetingComponent = () => {
  return (
    Hello, Neha!
  );
};
export default GreetingComponent;

2. 소품과 상태

React Native에서 props와 state는 ReactJS와 동일한 방식으로 작동합니다. 구성 요소 간 통신을 위해 props를 사용합니다. 값을 업데이트하려면 상태를 사용합니다.

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

const GreetingComponent = ({ name }) => {
  return (
    Hello, {name}!
  );
};
export default GreetingComponent;

3. 후크

ReactJS와 마찬가지로 React Native에서도 useState(), useMemo(), useEffect() 등 모든 후크를 사용할 수 있습니다. 또한 사용자 정의 후크를 직접 생성할 수도 있습니다.

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

const GreetingComponent = () => {
  const [name, setName] = useState('John');

  const changeName = () => {
    setName('Jane');
  };

  return (
    Hello, {name}!
    
  );
};

export default GreetingComponent;

4. 테스트

React Testing Library의 팬이라면 좋은 소식은 React Native에서 동일한 라이브러리를 사용하여 테스트할 수 있다는 것입니다.

import React from 'react';
import { render, fireEvent } from '@testing-library/react-native';
import GreetingComponent from './GreetingComponent';

test('it renders correctly and changes name on button press', () => {
  // Render the component
  const { getByText } = render();

  // Assert initial state
  expect(getByText('Hello, John!')).toBeTruthy();

  // Find the button and simulate a press
  const button = getByText('Change Name');
  fireEvent.press(button);

  // Assert that the name has changed
  expect(getByText('Hello, Jane!')).toBeTruthy();
});

5.JSX

React Native에는 JSX에서 뷰를 생성하는 데 사용할 수 있는 몇 가지 구성 요소가 있습니다. 그러나 ReactJS에서는 유효한 HTML DOM 요소를 사용할 수 있습니다.

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

const GreetingComponent = () => {
  return (
    Hello, Neha!
  );
};
export default GreetingComponent;

즐거운 학습!!