React Native - ref 오류 : Warning: Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()?

 

      <View>
        <Controller
          control={control}
          name="A약관"
          render={({field}) => (
            <Checkbox
              {...field}
              label={
                <Text>
                  만 14세 이상 입니다. (필수)</Text>
                </Text>
              }
            />
          )}
        />
      </View>

부모컴포넌트에서 controller로 자식 checkbox의 value를 제어했었는데, 기능은 잘 되지만 콘솔에 Ref Error가 떴다.

React에서 Ref를 사용하는 경우

VanillaJS와 달리 React에서는 특정 DOM을 직접적으로 수정해야하는 경우, Ref를 사용!

• 특정 element에 포커스, 속성값을 관리할 때.
• 특정 element에 애니메이션을 직접적으로 실행시킬 때.
• 서드 파티 DOM 라이브러리를 React와 같이 사용할 때.

출처: https://sambalim.tistory.com/151 [삼바의 성장 블로그:티스토리]

 

부모 컴포넌트에서 자식 컴포넌트의 DOM 요소를 접근할 때는 forwardRef를 사용하여 접근해야 한다고 한다.

 

해결방법

controller의 render를 통해 field를 통째로 넘기고 있으므로, 자식 checkbox 컴포넌트에 forwardRef를 감싼 후 ref를 전달해줬다.

const Checkbox = React.forwardRef(
  (
    {value = false, label, onChange}: Props,
    ref: React.ForwardedRef<any>, // ref type추가
  ) => {
  
    const onPress = useCallback(() => {
      onChange(!value);
    }, [onChange, value]);

    return (
      <Pressable
        ref={ref} // ref 전달
        onPress={onPress}
        >
        {label}
      </Pressable>
    );
  },
);

 

여담

자식 컴포넌트를 forwardRef로 감싸고 {...기존props, ref} 이렇게 추가해주니  forwardRef render functions accept exactly two parameters: props and ref. Did you forget to use the ref parameter?

이런 에러가 떴는데, fowardRef((props, ref)) 두가지 인자로 넘겨줘야했었나보다. ref를 괄호 밖으로 빼서 넘겨주니 더 이상 오류가 안남 끘!