#9.4 React Hook Forms on Native

native에서는 form이 없어도 된다.
useEffect로 register를 등록해주고 onChangeText를 이용하여 setValue해준다.

//Login.js
export default function Login({ navigation }) {
  const { register, handleSubmit, setValue } = useForm();
  
  const onValid = (data) => {
        console.log(data);
    };
    useEffect(() => {
        register("username");
        register("password");
    }, [register]);
  return (
        <AuthLayout>
            <TextInput
                placeholder="Username"
                returnKeyType="next"
                autoCapitalize="none"
                placeholderTextColor={"rgba(255, 255, 255, 0.6)"}
                onSubmitEditing={() => onNext(passwordRef)}
                onChangeText={(text) => setValue("username", text)}
            />
            <TextInput
                ref={passwordRef}
                placeholder="Password"
                secureTextEntry
                returnKeyType="done"
                lastOne={true}
                onSubmitEditing={handleSubmit(onValid)}
                placeholderTextColor={"rgba(255, 255, 255, 0.6)"}
                onChangeText={(text) => setValue("password", text)}
            />
            <AuthButton
                text="Log In"
                disabled={false}
                onPress={handleSubmit(onValid)}
            />
        </AuthLayout>
    );
}

---

#9.5 Navigate with param

navigation의 내장된 navigate 함수로 param과 함께 넘어갈 수 있다.

//CreateAccount.js
export default function CreateAccount({ navigation }) {
    const { register, handleSubmit, setValue, getValues } = useForm();
    const onCompleted = (data) => {
        const { createAccount: { ok } } = data;
        const { username, password } = getValues();
        if (ok) {
            navigation.navigate("Login", {
                username,
                password,
            });
        }
    };

받을 때는 route의 param으로 useForm을 통해서 받는다.

//Login.js
export default function Login({ route: { params } }) {
    const { register, handleSubmit, setValue, formState, watch } = useForm({
        defaultValues: {
            password: params?.password,
            username: params?.username,
        }
    });

---

#9.6 AsyncStorage

로그인을 하면 AsyncStorage에 multiSet을 이용하여 저장한다.

web에서는 localStorage에서 바로 받아오기 때문에 isLoggedInVar를 생성할 때 localStorage값으로 했지만 reac-native는 비동기로 받아와 처음에는 false로 설정하고 로딩 때 값을 확인한다

//apollo.js
import { ApolloClient, InMemoryCache, makeVar } from "@apollo/client";
import AsyncStorage from "@react-native-async-storage/async-storage";

export const isLoggedInVar = makeVar(false);
export const tokenVar = makeVar("");

export const logUserIn = async (token) => {
    await AsyncStorage.multiSet([["token", JSON.stringify(token)], ["loggedIn", JSON.stringify("yes")],]);
    isLoggedInVar(true);
    tokenVar(token);
};

어플을 처음 실행시키고 로딩할 때 토큰을 확인한다.

//App.js
const preload = async () => {
    const token = await AsyncStorage.getItem("token");
    if (token) {
      isLoggedInVar(true);
      tokenVar(token);
    }
    return preloadAssets();
  };