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 중국어 웹사이트의 기타 관련 기사를 참조하세요!