React Native의 국가 관리

React Native의 상태는 시간이 지남에 따라 카운터 애플리케이션의 카운터 또는 할 일 목록과 같은 할 일 목록과 같은 모든 것을 말합니다. React의

Context API는 각 층에서 소품을 수동으로 전달하지 않고 구성 요소 트리에서 데이터를 전달하는 방법을 제공하므로 소위 "소품 드릴링"문제를 피합니다. 구성 요소간에 데이터를 직접 전송할 수 있습니다.
• 반응 후크는 React v16.8에 도입되어 상태가 반응하는 방식을 단순화했습니다. 함수 구성 요소에서 상태를 사용하고 코드 줄 수를 줄이며 코드를 쉽게 읽을 수 있습니다. setState() 상태를 상위 구성 요소로 높이면 구성 요소를 통해 상태를 공유 할 수 있습니다. 이 관행은 항상 간단한 것은 아니지만 React에서 일반적이며 부모 구성 요소가 큰 상태 대상이되는 것을 방지하는 데 도움이됩니다.
• 주 경영진은이를 구현할 수있는 여러 가지 방법이 있기 때문에 React Native를 학습하는 데 가장 어려운 개념 중 하나입니다. NPM 레지스트리에는 Redux와 같은 수많은 주 관리 라이브러리가 있으며 다른 주 관리 라이브러리를 기반으로 한 수많은 라이브러리가 있으며 Redux Easy와 같은 원래 라이브러리 자체를 단순화합니다. 새로운 주 관리 도서관은 매주 RECT에 도입되지만 RECT가 도입 된 이후, 응용 프로그램 상태 유지의 기본 개념은 동일하게 유지됩니다.
React Native에서 상태를 설정하는 가장 일반적인 방법은 React의 메소드를 사용하는 것입니다. 또한 컨텍스트 API를 사용하여 소품 시추를 피하고 트리의 개별 하위 구성 요소에게 전달하지 않고 다층 상태를 아래로 전달할 수 있습니다. 최근에, 후크는 React V16.8.0에 나타났습니다. React Native는 V0.59에서 가져 왔습니다.
• 이 튜토리얼에서는 상태가 실제로 무엇을 의미하는지,
메소드, 컨텍스트 API 및 반응 후크를 배울 것입니다. 이것은 React Native에서 상태를 설정하기위한 기초입니다. 모든 라이브러리는 위의 기본 개념을 기반으로 구축됩니다. 따라서 이러한 개념을 이해하면 라이브러리를 이해하거나 자신의 주 관리 라이브러리를 쉽게 만들 수 있습니다.

시간이 지남에 따라 변하는 것을 상태라고합니다. 카운터 응용 프로그램이 있으면 상태가 카운터 자체입니다. 할 일 앱이 있으면 시간이 지남에 따라 할 일 목록이 변경 되므로이 목록은 상태가됩니다. 입력 요소조차도 사용자가 입력 할 때 시간이 지남에 따라 변경되므로 어떤 의미에서 상태입니다. setState()

이제 우리는 상태가 무엇인지 알았으므로 React가 어떻게 저장하는지 이해합시다.

간단한 카운터 애플리케이션을 고려하십시오 :

상태는 하나의 물체 일 수 있습니다. 직접 숫자를 저장할 수 없습니다. 이것이 바로 우리가 객체 내부에

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

class Counter extends React.Component {
  state = {
    counter: 0,
  };

  render() {
    const { counter } = this.state;
    return (
      <>
        <Text>{counter}</Text>
        <Button title="Increment" onPress={() => this.setState({ counter: counter + 1 })} />
        <Button title="Decrement" onPress={() => this.setState({ counter: counter - 1 })} />
      </>
    );
  }
}

당신은 또한 다음과 같이 생성자 외부의 상태를 쓸 수 있습니다 : this.state.

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

class Counter extends React.Component {
  state = { counter: 0 };

  render() {
    const { counter } = this.state;
    return (
      <>
        <Text>{counter}</Text>
        <Button title="Increment" onPress={() => this.setState({ counter: counter + 1 })} />
        <Button title="Decrement" onPress={() => this.setState({ counter: counter - 1 })} />
      </>
    );
  }
}

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

class Counter extends React.Component {
  state = { counter: 0 };

  render() {
    const { counter } = this.state;
    return (
      <>
        <Text>{counter}</Text>
        <Button title="Increment" onPress={() => this.setState(prevState => ({ counter: prevState.counter + 1 }))} />
        <Button title="Decrement" onPress={() => this.setState(prevState => ({ counter: prevState.counter - 1 }))} />
      </>
    );
  }
}

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

class Counter extends React.Component {
  state = {
    counter: 0,
  };

  render() {
    const { counter } = this.state;
    return (
      <>
        <Text>{counter}</Text>
        <Button title="Increment" onPress={() => this.setState({ counter: counter + 1 })} />
        <Button title="Decrement" onPress={() => this.setState({ counter: counter - 1 })} />
      </>
    );
  }
}

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

class Counter extends React.Component {
  state = { counter: 0 };

  render() {
    const { counter } = this.state;
    return (
      <>
        <Text>{counter}</Text>
        <Button title="Increment" onPress={() => this.setState({ counter: counter + 1 })} />
        <Button title="Decrement" onPress={() => this.setState({ counter: counter - 1 })} />
      </>
    );
  }
}

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

class Counter extends React.Component {
  state = { counter: 0 };

  render() {
    const { counter } = this.state;
    return (
      <>
        <Text>{counter}</Text>
        <Button title="Increment" onPress={() => this.setState(prevState => ({ counter: prevState.counter + 1 }))} />
        <Button title="Decrement" onPress={() => this.setState(prevState => ({ counter: prevState.counter - 1 }))} />
      </>
    );
  }
}