programing

React JS에서 비동기/대기 사용이 가능합니까?

i4 2023. 3. 27. 21:00
반응형

React JS에서 비동기/대기 사용이 가능합니까?

리액트 네이티브로 프로그래밍을 시작했고 다음 구문을 사용하는 데 익숙해졌습니다.

async myFunction(){
    ...
    return await otherFunction();
}

하지만 공유 패키지로 React JS 및 React Native와 호환되도록 하는 방법을 모르겠습니다.어떻게 하면 양쪽 플랫폼에서 동작하도록 할 수 있을까요?

감사합니다!

create-react-app을 사용하여 빌드하는 경우 v0.2.3부터 사용 가능

https://github.com/facebookincubator/create-react-app/releases/tag/v0.2.3

다음과 같은 컴포넌트 내에서 사용할 수 있습니다.

class App extends Component {
  constructor(props) {
    super(props);
    this.state = { message: '' };
  }

  async componentDidMount() {
    this.setState({ message: 'loading...' });
    let d = await getData('/posts/1');
    this.setState({ message: d });
  }

  render() {
    let { message } = this.state;
    return (
      <div className="App">
        <p className="App-intro">
          { message }
        </p>
      </div>
    );
  }
}

참조:

https://github.com/facebookincubator/create-react-app/issues/1024

React Native는 Babel 및 일부 Babel 사전 설정과 함께 제공되며, React on Web은 React 관련 코드일 뿐입니다.

현재 웹에서 비동기/비동기 기능을 사용하려면 Babel과 올바른 변환이 필요합니다.https://babeljs.io/docs/plugins/transform-async-to-generator/

또는 스테이지 1 프리셋(현재 리액트 앱에서 매우 일반적인)을 사용합니다.http://babeljs.io/docs/plugins/preset-stage-1/

또는 Typescript를 사용할 수도 있습니다.

버전 2.1 이후로는async/awaitES5로 직접 변환(즉, ~모든 브라우저에서 실행)

언급URL : https://stackoverflow.com/questions/38357234/is-it-possible-to-use-async-await-in-react-js

반응형