구글링해서 공부 중 간단한 useState 코드 테스트 중인데요

app.js

import React from 'react';
import Counter from './Counter';

function App() {
  return (
    <Counter />
  );
}

export default App;

Counter.js

import React, { useState } from 'react';

function Counter() {
  const [number, setNumber] = useState(0);

  const onIncrease = () => {
    setNumber(number + 1);
  }

  const onDecrease = () => {
    setNumber(number - 1);
  }

  return (
    <div>
      <h1>{number}</h1>
      <button onClick={onIncrease}>+1</button>
      <button onClick={onDecrease}>-1</button>
    </div>
  );
}

export default Counter

실행 시켰을 때 Expo 어플에서는 아래 처럼 에러나고

Web 에서는 아래처럼 잘 동작합니다.

이런적이 몇 번 있었던 것 같은데 차이가 나는 이유가 뭘까요??

▼ 답변 받은내용

서정은

튜터

・

안녕하세요 지훈님! 웹에서는 보였는데 Expo 어플에서는 화면이 보이지 않아 답답하셨겠네요 ㅠㅠ

React Native는 html을 번역할 수는 없고, <View>, <Text>와 같은 태그를 이용하셔야 Expo 어플에서 화면을 그릴 수 있어요!

html 태그로 작성하셔서 웹에는 보였지만 expo 어플에서는 확인이 어려워셨던거같습니다 :)

김지훈

작성자

・

아 그렇군요

그럼 Expo 어플에도 동일하게 보여지려면 어떻게 바꿔야하나요

일단 아래처럼 바꿔도 같은 에러가 뜨긴하네요 ㅜ

Counter.js

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


function Counter() {
  const [number, setNumber] = useState(0);


  const onIncrease = () => {
    setNumber(number + 1);
  }


  const onDecrease = () => {
    setNumber(number - 1);
  }


  return (
    <View>
      <Text>{number}</Text>
      <TouchableOpacity onClick={onIncrease}>+1</TouchableOpacity>
      <TouchableOpacity onClick={onDecrease}>-1</TouchableOpacity>
    </View>
  );
}


export default Counter

추가 질문 드립니다 !