React Native에서 부모와 자식 상태 및 함수에 액세스하기

React Native로 작업할 때 재사용 가능한 모듈식 구성 요소를 구축하는 것이 일반적입니다. 때로는 상위 구성 요소의 상태와 기능에 액세스하거나 수정하기 위해 하위 구성 요소가 필요하며 그 반대의 경우도 마찬가지입니다. 상위 구성요소와 하위 구성요소 간의 이러한 통신은 몇 가지 다른 방법으로 달성될 수 있습니다. React Native에서 상위 구성 요소와 하위 구성 요소 간에 상태와 기능을 더 쉽게 공유할 수 있는 다양한 기술을 살펴보겠습니다.

1. 부모에서 자식으로 상태와 기능 전달

소품 사용

Prop은 상위 구성 요소에서 하위 구성 요소로 데이터와 기능을 공유하는 가장 간단한 방법입니다. 이는 부모가 자식 구성 요소의 일부 동작이나 데이터를 제어해야 할 때 특히 유용합니다.

예: 부모 상태와 함수를 자식에게 전달

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

const ParentComponent = () => {
  const [count, setCount] = useState(0);

  // Function to increment count
  const incrementCount = () => setCount(count + 1);

  return (
    <View>
      <Text>Count: {count}</Text>
      <ChildComponent count={count} incrementCount={incrementCount} />
    </View>
  );
};

const ChildComponent = ({ count, incrementCount }) => {
  return (
    <View>
      <Text>Count from Parent: {count}</Text>
      <Button title="Increment Count" onPress={incrementCount} />
    </View>
  );
};

export default ParentComponent;

이 예에서는:

• 상위 구성 요소(ParentComponent)에는 개수 상태와 incrementCount 함수가 있습니다.
• props를 통해 하위 구성 요소(ChildComponent)로 전달됩니다.
• 자식 구성요소는 제공된 기능을 사용하여 상위 구성요소의 상태를 표시하고 조작할 수 있습니다.

2. 부모로부터 자식 기능에 접근하기

상위 구성 요소의 하위 구성 요소에서 기능을 실행하려면 refs 및 콜백 함수를 사용할 수 있습니다.

ForwardRef와 함께 useRef 사용

React.forwardRef와 함께 useRef를 사용하면 상위 요소가 하위 기능에 직접 액세스할 수 있어 하위 구성요소를 더 효과적으로 제어할 수 있습니다.

예: 부모로부터 자식 함수 호출

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

const ParentComponent = () => {
  const childRef = useRef(null);

  // Function to call child function from parent
  const callChildFunction = () => {
    if (childRef.current) {
      childRef.current.showAlert();
    }
  };

  return (
    <View>
      <Button title="Call Child Function" onPress={callChildFunction} />
      <ChildComponent ref={childRef} />
    </View>
  );
};

const ChildComponent = React.forwardRef((props, ref) => {
  const showAlert = () => {
    alert('Child Function Called!');
  };

  React.useImperativeHandle(ref, () => ({
    showAlert
  }));

  return (
    <View>
      <Text>This is the child component.</Text>
    </View>
  );
});

export default ParentComponent;

이 예에서는:

• 우리는 React.forwardRef를 사용하여 부모의 참조를 자식에게 전달합니다.
• 하위 구성 요소는 useImperativeHandle을 사용하여 상위 구성 요소에 노출되는 showAlert 함수를 정의합니다.
• 이후 부모는 childRef에 액세스하여 showAlert를 호출할 수 있습니다.

3. 깊게 중첩된 구성 요소의 상위 상태 및 기능에 액세스

구성 요소가 여러 수준 깊이로 중첩된 경우 각 구성 요소를 통해 prop을 전달하는 것이 번거로울 수 있습니다. 이러한 시나리오의 경우 React Context API는 전체 구성 요소 트리에서 상태와 기능을 공유할 수 있도록 하여 솔루션을 제공합니다.

React 컨텍스트 API 사용

예: 깊게 중첩된 하위 항목의 부모 상태 및 함수에 액세스

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

const CountContext = createContext();

const ParentComponent = () => {
  const [count, setCount] = useState(0);

  const incrementCount = () => setCount(count + 1);

  return (
    <CountContext.Provider value={{ count, incrementCount }}>
      <View>
        <Text>Count: {count}</Text>
        <NestedChildComponent />
      </View>
    </CountContext.Provider>
  );
};

const NestedChildComponent = () => {
  return (
    <View>
      <DeepChildComponent />
    </View>
  );
};

const DeepChildComponent = () => {
  const { count, incrementCount } = useContext(CountContext);

  return (
    <View>
      <Text>Count from Context: {count}</Text>
      <Button title="Increment Count" onPress={incrementCount} />
    </View>
  );
};

export default ParentComponent;

이 예에서는:

• createContext를 사용하여 count 및 incrementCount 함수를 보유하는 CountContext를 생성합니다.
• ParentComponent는 CountContext.Provider 내부에 중첩된 구성 요소를 래핑하여 카운트 상태 및 incrementCount 함수에 대한 액세스를 제공합니다.
• 여러 수준 깊이로 중첩될 수 있는 DeepChildComponent는 useContext를 사용하여 count 상태 및 incrementCount 함수에 쉽게 액세스할 수 있습니다.

4. 컨텍스트 없이 하위에서 상위 상태 업데이트

하위 구성 요소가 상위 구성 요소의 상태를 업데이트해야 하고 Context API를 사용하지 않으려는 경우 상위 구성 요소에서 하위 구성 요소로 콜백 함수를 전달할 수 있습니다.

예: 하위 콜백으로 상위 상태 업데이트

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

const ParentComponent = () => {
  const [count, setCount] = useState(0);

  // Function to increment count
  const incrementCount = () => setCount(count + 1);

  return (
    <View>
      <Text>Count: {count}</Text>
      <ChildComponent count={count} incrementCount={incrementCount} />
    </View>
  );
};

const ChildComponent = ({ count, incrementCount }) => {
  return (
    <View>
      <Text>Count from Parent: {count}</Text>
      <Button title="Increment Count" onPress={incrementCount} />
    </View>
  );
};

export default ParentComponent;

이 예에서는:

• 상위 구성 요소는 상태를 수정하는 updateMessage 함수를 정의합니다.
• 이 함수는 하위 구성 요소에 prop으로 전달됩니다.
• 자녀는 이 함수를 호출하여 부모의 메시지 상태를 업데이트할 수 있습니다.

결론

React Native는 상위 구성 요소와 하위 구성 요소 간의 통신을 촉진하는 다양한 방법을 제공합니다. 필요에 따라:

• 직계 부모와 자식 간의 간단한 데이터 및 기능 공유를 위해 props를 사용하세요.
• forwardRef와 함께 ref를 사용하면 상위 구성요소가 하위 함수를 호출할 수 있습니다.
• Context API는 깊게 중첩된 구성요소 간에 데이터를 공유하는 데 탁월합니다.
• 콜백 함수는 전역 컨텍스트 없이 하위 항목이 상위 상태를 업데이트할 수 있는 직접적인 방법을 제공합니다.

이러한 방법을 적절하게 사용하면 React Native에서 복잡한 구성 요소 계층을 관리하고 구성하는 능력을 크게 향상시킬 수 있습니다. 각각을 실험하여 프로젝트 요구 사항에 가장 적합한 것이 무엇인지 이해하세요. 즐거운 코딩하세요!

위 내용은 React Native에서 부모와 자식 상태 및 함수에 액세스하기의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!