react native. custom hook

컴포넌트를 어떻게 나눌 수 있을까 고민하자.
flexDirection
row: 가로 column: 세로

클래스 컴포넌트에서 props 접근은 this.props로 접근한다.

 

커스텀 훅

- 커스텀 훅은 이름이 use로 시작해야한다.
- value, setValue, resetValue 3가지를 리턴한다.

 

import React, {useState} from 'react'
import {View, TextInput, Button} from 'react-native'

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

// Custom Hook
const useInput = (initialValue) => {
  const [value, setValue] = useState(initialValue);
  const resetValue = () => setValue(initialValue);

  return {
    value,
    setValue,
    resetValue,
  }
}

const CustomHook = () => {
  const {value: name, setValue: setName, resetValue: resetName} = useInput('');
  const {value: age, setValue: setAge, resetValue: resetAge} = useInput('');
  const {value: address, setValue: setAddress, resetValue: resetAddress} = useInput('');

  return (
    <View>
      <InputBox
        value={name}
        placeholder="이름을 입력하세요."
        onChange={setName}
        onReset={resetName}
      />
      <InputBox
        value={age}
        placeholder="나이를 입력하세요."
        onChange={setAge}
        onReset={resetAge}
      />
      <InputBox
        value={address}
        placeholder="주소를 입력하세요."
        onChange={setAddress}
        onReset={resetAddress}
      />
    </View>
  )
}

export default CustomHook;