하위 컴포넌트에서 상위 컴포넌트로 값 전달

TypeScript

• 하위 컴포넌트에서 값 보내기

  export type LowComponentRefProps = {
      testFunction : (input:number) => void
  }
  
  const LowComponent= React.forwardRef<LowComponentRefProps>((ref) => {
  		const testFunction = (input:number) => {
  			...
  		}
      useImperativeHandle(ref, () => ({testFunction}), [
          testFunction,
      ]); 
  		...
  }
  

• 상위 컴포넌트에서 값 받기

  export type LowComponentRefProps = {
      testFunction : (input:number) => void,
      testValue : number
  }
  
  const HighComponent = () => {
  	  const ref = useRef<LowComponentRefProps>(null);
  	  ref?.current?.testFunction(1);
  	  ref?.current?.testValue;
  		return(
  				<View>
  				    <LowComponent ref={ref}>
  		    </View>
  		)
  }
  

상위 컴포넌트에서 하위 컴포넌트로 값 전달

TypeScript

• 상위 컴포넌트에서 값 보내기

  const HighComponent= () => {
  		const testFunction = () => {
  			...
  		}
  		...
  		return (
  		<View>
  	    <LowComponent testFunction={testFunction} testValue={10}>
  		    <TestComponent/>
  	    </LowComponent>
      </View>
  		)
  }
  

• 하위 컴포넌트에서 값 받기

  type LowComponentProps = {
      children?: React.ReactNode,
      testFunction: (input:number) => void,
      testValue: number
  }
  
  const LowComponent= React.forwardRef<LowComponentProps>(
  ({children, testFunction, testValue}) => {
  		const value = 10;
  		testFunction(testValue-value);
  		...
  		return(
  		<View>
  			{children} // TestComponent
  		</View>
  		)
  }