재 사용을 통한 SourceCode 간결화(props, CustomHook 이용)

<개요>

회원가입 화면을 구성하는 컴포넌트들 간의 로직은 같다. 모두 값을 받아서 백엔드로 보내준다. 만약 올바르게 입력 안 했을 경우에는 오류 메세지 띄운다. 초기화 버튼이 있다. 

만약 이 같은 로직의 컴포넌트를 여러 개 작성한다면, 중복코드도 많고, 코드량이 길어져 가독성이 떨어질 것이다. 

이를 막기 위해 통일된 하나의 로직을 만들고, 해당 로직을 호출할 때, 쓰는 인자 값을 달리함으로써, 코드 재사용성을 높인다. 

 

또한 Custom Hook이라는 커스터마이징한 훅을 만들어, 같은 로직의 useState를 하나로 통일하고, 여기 넣는 인자들을 달리 함으로써 코드 재사용성을 높일  수 있다.

 

1. 코드 리뷰 

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


// 중복되는 로직 하나의 컴포넌트로 통일, 개체마다 다른 값들은 props를 통해 다 상이하게 처리 가능
const InputBox = (props) => {
  return(
    <View style={{flexDirection: "row"}}>
    <TextInput value={props.value}
      onChangeText={props.onChangeText} 
      style={{borderBottomWidth:1, width: 200}}
      placeholder={props.placeholder}
    />  
    <Button title='초기화' onPress={props.onReset}/>
  </View>

  )
}

//useState 하나로 통일, 하나의 컴포넌트 안에 집어넣음. 
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: city, 
      setValue: setCity, 
      resetValue: resetCity
    } = useInput("");



  
  return (
    <View>
      <InputBox
        value ={name}
        onChangeText = {setName}
        placeholder = "이름을 입력해주세요."
        onReset = {resetName}
      />

      <InputBox
        value ={age}
        onChangeText = {setAge}
        placeholder = "나이를 입력해주세요."
        onReset = {() => setAge("")}
      />


      <InputBox
        value ={city}
        onChangeText = {setCity}
        placeholder = "사는 곳을 입력해주세요."
        onReset = {() => setCity("")}
      />
    </View>
    
  )
  }

export default CustomHook;

2. 구조 분해 할당과 재선언 

  return{
    value,
    setValue,
    resetValue,
  }

customHook의 리턴값이 3개이다. 이는 리턴이 배열임 알 수 있다. 이는 구조 분해 할당으로 하나의 변수에 리턴 값 한 개씩 받을 수 있다. 

 

  const {
      value 
      setValue
      resetValue
    } = useInput("");

하지만 이렇게 하면, 하위 컴포넌트 별로 쓰기가 어렵다. 하위 컴포넌트에 들어가는 값과 함수의 이름이 다 같으니 헷갈리기 십상이다.

이를 방지하기 위하여 하위 컴포넌트 별로 분간이 가게 변수와 함수들을 재선언 해준다.  

  const {
      value: name, 
      setValue: setName, 
      resetValue: resetName
    } = useInput("");

3. 스스로 해보기 

1. 회원가입과 초기화 버튼 만들기 

2.  회원가입 항목은 이름, 나이, 사는 곳이고, 다들 로직이 같으므로 하나의 컴포넌트에 묶어 표현하기. 

3. 사용자의 입력에 따른 값 변화 로직을 담당하는 useState도 로직이 같으니 하나의 컴포넌트에 선언하고 그것을 재 사용하기.

 

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


function InputBox(props) {
  return(
    <View style={{flexDirection: "row"}}>
  <TextInput
    style={{ borderBottomWidth: 3
            ,borderStyle: "dashed"
            ,color:"grey"
            ,width: 150}}  
    value={props.value}
    OnChangeText = {props.OnChangeText}
    placeholder = {props.placeholder}
  />

  <Button title='초기화' onPress={props.OnReSet}
  />
    </View>
  )
}


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: city, 
        setValue: setCity, 
        resetValue: resetCity} = useInput("");



  return (
    <View>
      <InputBox 
        value = {name}
        OnChangeText = {setName}
        OnReSet = {resetName}
        placeholder = "이름을 입력해주세요."  
      />

      <InputBox 
        value = {age}
        OnChangeText = {setAge}
        OnReSet = {resetAge}
        placeholder = "나이를 입력해주세요."  
      />

      <InputBox 
        value = {city}
        OnChangeText = {setCity}
        OnReSet = {resetCity}
        placeholder = "사는 곳을 입력해주세요."  
      />
    </View>
    
  )
  }

export default CustomHook;

 

알게 된 것 

함수 리턴을 받을 때는 구조 분해 할당을 Object 객체 방식으로 받아야 한다. 

함수도 일반 객체 취급을 받기 때문이다. 

JS 에서객체는 값들을 Key = Value 형식으로 저장한다. 

여기사의 value가 바인딩 되는 녀석이고, 다른 컴포넌트에서 쓰는 녀석이다. 

 

{변수} 으로 묶으면 이건 변수 안의 값을 쓰겠다는 뜻.
{명령어(링크)} 명령어를 수행한 결과를 쓰겠다는 뜻. 

 

내껀 초기화가 안됨 ㅜㅜ

 

 

// 다음 날 초기화 풀었음. 

내꺼에서 틀린 부분은 TextInput의 onChange 속성을 Onchange라고 대문자로 적은 것. 

그리고 customHook의 return을 ()로 묶은 것이다. 

return () 은 하나의 값만 반환이 가능하다. 지금까지 ()를 썼던 이유는 return을 view 하나만 하기 때문이었다. 

여러개 할려면 return {A, B, C} 형식으로 묶어야 한다.