React Native 하루 기록 - custom Hook

• custom Hook은 "use"라는 prefix가 붙어야한다.

import React, {useState} from "react";
import { TextInput, View, Button, ProgressViewIOSComponent } from "react-native";

const InputBox = (props) => {
    return (
        <View style={{ flexDirection: "row"}}>
            <TextInput 
                value={props.value} 
                onChangeText={props.onChangeText} 
                style = {{ borderBottomWidth : 1, width:100}} 
                placeholder={props.placeholder}
            />
            <Button title="초기화" onPress={props.onReset}></Button>
        </View>
    )
}

const useInput = (initialValue) => {
    const [value, setValue] = useState(initialValue);

    const resetValue = () => setValue(initialValue);

    return { value, setValue, resetValue,}
}

const CustomHook = () => {

    // 1.useState로 작업
    // const [name, setName] = useState("");
    // const [age, setAge] = useState("");
    // const [city, setCity] = useState("");

    // 2.custom hook 생성 후 각각 선언
    // const output = useInput("");
    // const name = output.value;
    // const setName = output.setValue;
    // const resetName = output.resetValue;

    // 3. 2번의 내용을 한줄로 표현
    const { value: name, setValue : setName, resetValue : resetName} = useInput("");
    const { value: age, setValue : setAge, resetValue : resetAge} = useInput("");
    const { value: city, setValue : setCity, resetValue : resetCity} = useInput("");

    return (
        <View>
           <InputBox value = {name} onChangeText={setName} placeholder="이름을 입력해주세요" onReset={resetName} />
           <InputBox value = {age} onChangeText={setAge} placeholder="나이를 입력해주세요" onReset={resetAge} />
           <InputBox value = {city} onChangeText={setCity} placeholder="장소를 입력해주세요" onReset={resetCity} />
        </View>
    );
};

export default CustomHook;