React Native - input hidden 처럼 setValue하기(react-hook-form)

하하 ~ 한때 잠시 했던 스프링과 jsp로 프로젝트를 진행하다가 리액트 네이티브를 하게되니,,,

사용자 인풋값을 처리하는 방식이 달라서 헷갈렸다!!

 

리뷰 댓글 기능을 만들다가 마주치게 된 에로사항인데, 일단 리뷰의 데이터타입은 이렇다.

interface IReview {
  id: number;
  rating: number;
  content: string;
  images: string[];
  createdAt: string;
  reviewer: {
    id: number;
    nickname: string;
    profileImage: string;
  };
  store: {
    name: string;
    region: {
      name: string;
    };
  };
  product: {
    name: string;
    image: string;
  };
  children: IReview
}

리뷰id가 Primary Key이고 그 안에 children으로 댓글이 들어가는 구조.

 

그리고 댓글을 작성하고 완료버튼을 누르면 writeApi에 태워보낼 데이터는 이것임.

const writeReplyApi = async (params: WriteReplyParams) => {
  await httpClient.post('/owner/review', params);
};

const {mutate: _write} = useMutation(writeReplyApi, {
    onSuccess: () => {
      Alert.alert('작성되었습니다.');
      queryClient.invalidateQueries(queryKeys.reviews);
    },
 });

interface WriteReplyParams {
  reviewId: number;
  content: string;
}

 

 

구현하고 싶었던건 댓글을 작성할 리뷰를 클릭하면 reviewId값에 해당 리뷰 id가 박혔어야되는 것~!

그래서 구글링을 해봐따. react native input hidden으로 ......ㅋㅋ

그랬더니 useForm에서 제공하는 setValue를 통해 setValue('key','value')로 값을 set해줄 수 있다는 걸 알게댐.

// useWriteReplyForm.ts

const useWriteReplyForm = () => {
  const {write} = useReply();

  const {watch, setValue, resetField, ...methods} =
    useForm<AddOwnerReplyFormFields>();

  const canSubmit = watch('content').trim().length > 0;

  const onSubmit = methods.handleSubmit(data => {
    write({...data});
    resetField('content');
  });

  return {...methods, setValue, onSubmit, canSubmit};
};

 

그 후 writeReplyItem.tsx에서

const WriteReplyItem: React.FC<Props> = ({reviewId}) => {
  const [show, setShow] = useState(false);

  const {onSubmit, canSubmit, setValue, ...methods} = useWriteReplyForm();

  const toggle = useCallback(
    (id: number) => {
      setValue('reviewId', id);
      setShow(prev => !prev);
    },
    [setValue],
  );

  return (
    <View>
      <Pressable
        sentry-label="점주 댓글 달기 버튼"
        onPress={() => {
          toggle(reviewId);
        }}>
        <Text style={styles.replyBtn}>댓글달기</Text>
      </Pressable>
      {show && (
        <View style={{marginTop: 10}}>
          <FormInput
            control={methods.control}
            name="content"
            autoFocus
            maxLength={150}
            showLength
            multiline={true}
          />
          <View style={{alignSelf: 'flex-end'}}>
            <Button
              sentry-label="점주 댓글 작성 완료 버튼"
              size="small"
              marginTop={8}
              onPress={onSubmit}
              variant="filled"
              disabled={!canSubmit}>
              작성 완료
            </Button>
          </View>
        </View>
      )}
    </View>
  );
};

 

버튼 누르면 실행되는 toggle에 해당 reviewId를 태워주고 setValue해주면 끗.~

리뷰아이템의 하단으로 writeReplyItem을 넣어줬기에 댓글달기 버튼을 누를 때마다 해당 review의 값이 셋팅된다.