[TIL-160] React Native

 

 

 

TextInput 입력 완료 후 값 수정하기

onEndEditing

// bankData.json

{
  "1": {
    "bankName": "국민은행",
    "number": 14,
    "validation": {
      "regex": "/[0-9,-]{6,6}-[0-9,-]{2,2}-[0-9,-]{6,6}/",
      "hyphen": 2,
      "index": [6, 9]
    }
  },
  "2": {
    "bankName": "기업은행",
    "number": 14,
    "validation": {
      "regex": "/[0-9,-]{3,3}-[0-9,-]{6,6}-[0-9,-]{2,2}-[0-9,-]{3,3}/",
      "hyphen": 3,
      "index": [3, 10, 13]
    }
  },
  ...
}

  const modifyAccout = () => {
    if (!bankCode) {
      return;
    }

    const {validation, number} = bankData[bankCode];

    if (accountInput.length === accountLength) {
      setAccountLength(prev => prev + validation.hyphen);
      setAccountInput(prev => {
        let accountArr = prev.split('');

        for (let i = 0; i < validation.index.length; i++) {
          accountArr.splice(validation.index[i], 0, '-');
        }
        return accountArr.join('');
      });
    }
  };
  
  
  <TextInput
      style={styles.accountInput}
      keyboardType="number-pad"
      placeholder="계좌번호를 입력하세요."
      placeholderTextColor="rgb(153, 153, 153)"
      value={accountInput}
      onChangeText={text => {
        setAccountInput(text);
      }}
      onEndEditing={modifyAccout}
      maxLength={accountLength}
    />

 

 

버그: 사용자가 TextInput을 다시 수정할 경우

1. TextInput의 maxLength 문제

-이 포함된 길이에 맞게 한 차례 계좌번호의 길이(accountLength)가 늘어났다. 그런데 수정하여 지웠다가 다시 값을 입력해서 늘어난 accountLength에 달할 경우, setAccountLength(prev => prev + validation.hyphen)가 이전의 상태값에서 - 개수만큼 길이를 늘리기 때문에 다시 accountLength가 길어진다.

 

2. -(hyphen)이 있는 상태에서 다시 추가되는 문제

1차 입력 : 1111111111111 (숫자 13자)
1차 modifyAccount 적용 : 111-111111-1111 (- 추가되어 15자)
2차 입력(수정) : 1-111-1111111 (수정되어 형식에 맞지 않지만 15자)
2차 modifyAccount 적용 : 1-11-1-1111-11111(- 추가되어 17자)

이렇게 되면 형식이 망가진다. 1번 문제를 해결해서 글자수는 맞추더라도 문제...

 

  const modifyAccout = () => {
    if (!bankCode || accountInput.includes('-') {
      return;
    }

    const {validation, number} = bankData[bankCode];

    if (accountInput.length === accountLength) {
      setAccountLength(number + validation.hyphen);
      setAccountInput(prev => {
        let accountArr = prev.split('');

        for (let i = 0; i < validation.index.length; i++) {
          accountArr.splice(validation.index[i], 0, '-');
        }
        return accountArr.join('');
      });
    }
  };

1. accountLength가 이전 상태값이 아니라 상수인 은행별 계좌번호 길이(number)에서 - 개수(validation.hyphen)만큼 늘어나게 했다.

2. if 문을 추가하여 accountInput이 이미 -(hyphen)을 포함하고 있을 때는 modifyAccount()의 로직이 실행되지 않게 했다.

하지만 이 부분은 사용자가 한번 입력을 마친 계좌번호를 다시 수정할 경우 수동으로 양식을 모두 완성해야 하게 하므로 불완전하다. 그래서 아예 수정하려할 경우 처음부터 다시 입력해야 하도록 input의 value를 초기화하는 방법도 고려하고 있다.

 

Swipe Modal : 밀면 내려가는 UI

react-native-swipe-modal-up-down

 

https://www.npmjs.com/package/react-native-swipe-modal-up-down

 

 

React Native에서 grid 기능 구현하기

 flexWrap="wrap" prop

const Bank = () => {

...

  return (
    <View
      style={{
        borderTopRightRadius: 15,
      }}>
      <Text style={styles.bankModalTitle}>은행 선택</Text>
      <View style={styles.bank}>
        {BANKS.map(bank => (
          <Pressable
            key={bank.bank_code}
            style={styles.bankRow}
            onPress={() => {
              setBank(bank.bank_name);
              setIsSwipe(false);
            }}>
            <View style={styles.checkbox} />
            <Text style={{fontSize: 16, color: 'rgb(90,90,90)'}}>
              {bank.bank_name}
            </Text>
          </Pressable>
        ))}
      </View>
    </View>
  );
};

const styles = StyleSheet.create({
  bankModalTitle: {
    marginHorizontal: '2%',
    marginBottom: 20,
    paddingVertical: 20,
    borderBottomColor: 'rgb(153, 153, 153)',
    borderBottomWidth: 1,
    color: 'rgb(46,46,46)',
    fontSize: 16,
    fontWeight: 'bold',
    textAlign: 'center',
  },
  bankRow: {
    flexDirection: 'row',
    paddingVertical: 15,
    width: '50%',
  },
  bank: {
    flexDirection: 'row',
    flexWrap: 'wrap',
    paddingHorizontal: '5%',
  },
  checkbox: {
    width: 25,
    height: 25,
    marginRight: 10,
    backgroundColor: 'rgb(222,222,222)',
    borderRadius: 50,
  },
});

 

<FlatList /> 컴포넌트 & "numColumns" prop

• https://reactnative.dev/docs/flatlist#numcolumns  
• [React native / 리액트 네이티브] Grid 구현 방법, FlatList, numColumns, nativeEvent  https://deemmun.tistory.com/46

 

 

로컬의 json 파일 불러오기

const bankData = require('../../assets/data/bankData.json');

fetch 밖에 방법을 몰랐는데 경로가 문제인지 요청이 보내지지 않아서 다른 방법을 찾아봤다. http://localhost:3000/ 뒤에 이어서 쓸 절대경로의 문제일 수 있다고 생각했다.

1) 파일을 import 하거나 2) require("")를 이용해 불러올 수 있다. <Image /> 컴포넌트의 source를 지정할 때와 같은 require("경로")를 사용할 수 있다는 게 신기하다.

 

 

RN 프로젝트에 루트 폴더 설정하기

babel-plugin-root-import

자꾸 이미지 파일 경로를 쓰다보니 불편함을 느꼈다. React JS 프로젝트를 할 때는 루트가 public으로 잡혀있어서 절대경로를 사용하는 게 편했는데 RN은 아직 잘 모르겠지만 그런 경로가 안 잡혀있는 것 같다. 그래서 찾아보니 라이브러리를 사용해서 path를 정할 수 있다.

https://dev-yakuza.posstree.com/ko/react-native/root-import/

 

 

---

공부할 것

• Flatlist