React Native에서 암호 가시성을 표시/숨기기 위한 사용자 지정 후크 만들기

React Native 앱에서 로그인 및 가입 양식 작성은 입력 필드와 버튼으로 구성됩니다. 이러한 양식에 추가하는 경우가 많은 필드 중 하나는 비밀번호 필드입니다. 이 비밀번호 필드는 React NativeTextInput 컴포넌트를 사용하여 구성됩니다.

이 필드의 일반적인 동작은 모호한 문자 뒤에 사용자의 암호를 숨기는 것입니다.

암호 필드를 생성하는 데 사용되는 TextInput 구성 요소의 예를 살펴보십시오.

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

export default function App() {
  const [password, setPassword] = useState('');

  return (
    <View style={styles.container}>
      <View style={styles.inputContainer}>
        <TextInput
          style={styles.inputField}
          name='password'
          placeholder='Enter password'
          autoCapitalize='none'
          autoCorrect={false}
          textContentType='newPassword'
          secureTextEntry
          value={password}
          enablesReturnKeyAutomatically
          onChangeText={text => setPassword(text)}
        />
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#F5EEDC',
    alignItems: 'center',
    justifyContent: 'center',
    paddingHorizontal: 12
  },
  inputContainer: {
    backgroundColor: 'white',
    width: '100%',
    borderRadius: 8,
    flexDirection: 'row',
    alignItems: 'center',
    borderWidth: 4,
    borderColor: '#d7d7d7'
  },
  inputField: {
     padding: 14,
    fontSize: 22,
    width: '90%'
  }
  }
});

secureTextEntry 소품을 사용하여 텍스트 값이 입력 필드에 입력될 때 해당 필드에 무엇을 입력하고 있는지 명확하지 않습니다.

다음은 장치에서 위 스니펫의 출력입니다.



그러나 사용자가 입력한 현재 값을 볼 수 있는 옵션을 제공하면 좋은 경험을 제공할 수 있으며 경우에 따라 필요할 수 있습니다.

비밀번호 가시성 후크 표시 또는 숨기기

비밀번호 필드의 가시성을 표시하거나 숨기는 기능을 추가하기 위해 useTogglePasswordVisibility.js.js 라는 새 파일에서 사용자 정의 후크를 생성해 보겠습니다.

React 라이브러리에서 useState 후크를 가져와 시작합니다. 필드의 가시성을 전환하고 아이콘을 변경하려면 두 개의 다른 상태 변수를 생성해야 합니다.

그런 다음 useTogglePasswordVisibility 라는 함수를 정의합니다. 이 함수 내에서 두 개의 새 상태 변수를 만듭니다. 첫 번째는 passwordVisibility 입니다. 초기 값은 부울true로 설정됩니다. 그 이유는 이 변수가 secureTextEntry 구성 요소의 propTextInput 값이 되기 때문입니다. 사용자가 입력 필드에 암호를 입력할 때 처음에 암호 필드를 숨기고 싶을 것입니다.

정의된 두 번째 상태 변수는 rightIcon 입니다. 기본값은 eye 입니다. 이 값은 React Native 앱에서 사용 중인 아이콘 라이브러리에 따라 다릅니다. 이 예에서는 Expo Vector Icons 의 MaterialCommunityIcons를 사용하고 있습니다.

export const useTogglePasswordVisibility = () => {
  const [passwordVisibility, setPasswordVisibility] = useState(true);
  const [rightIcon, setRightIcon] = useState('eye');

  // ...
};

다음으로 앱 사용자가 표시됨 상태와 숨김 상태 사이에서 암호 필드의 가시성을 토글할 수 있도록 하는 handlePasswordVisibility 메서드를 추가합니다.

마지막으로 모든 변수와 핸들러 메서드를 반환하는 것을 잊지 마십시오.

export const useTogglePasswordVisibility = () => {
  const [passwordVisibility, setPasswordVisibility] = useState(true);
  const [rightIcon, setRightIcon] = useState('eye');

  const handlePasswordVisibility = () => {
    if (rightIcon === 'eye') {
      setRightIcon('eye-off');
      setPasswordVisibility(!passwordVisibility);
    } else if (rightIcon === 'eye-off') {
      setRightIcon('eye');
      setPasswordVisibility(!passwordVisibility);
    }
  };

  return {
    passwordVisibility,
    rightIcon,
    handlePasswordVisibility
  };
};

비밀번호 가시성 후크 사용

App.js 파일에서 import 문을 업데이트하여 시작합니다.

import React, { useState } from 'react';
import { StyleSheet, Pressable, TextInput, View } from 'react-native';
import { MaterialCommunityIcons } from '@expo/vector-icons';

import { useTogglePasswordVisibility } from './hooks/useTogglePasswordVisibility';

그런 다음 useTogglePasswordVisibility 후크에서 필요한 변수와 메서드에 액세스합니다. App 구성 요소의 맨 위에 다음 줄을 추가합니다.

export default function App() {
  const { passwordVisibility, rightIcon, handlePasswordVisibility } =
    useTogglePasswordVisibility();
  const [password, setPassword] = useState('');

  // ...
}

TextInput 구성 요소의 소품을 수정합니다. passwordVisibility 값을 secureTextEntry 소품에 추가해야 합니다.

<TextInput
  secureTextEntry={passwordVisibility}
  // ... rest of the props remain unchanged
/>

View 를 감싸는 TextInput 컴포넌트 안에 Pressable 컴포넌트를 사용하여 버튼을 추가하십시오. 이 버튼을 사용하면 암호 필드의 숨겨진 상태와 표시된 상태 사이를 전환할 수 있습니다.

이 버튼은 아이콘 구성 요소를 래핑합니다.

<View style={styles.inputContainer}>
  {/* After TextInput component */}
  <Pressable onPress={handlePasswordVisibility}>
    <MaterialCommunityIcons name={rightIcon} size={22} color="#232323" />
  </Pressable>
</View>

그게 다야! 이 단계 후의 출력은 다음과 같습니다.



다음은 App.js 파일의 전체 코드입니다.

import React, { useState } from 'react';
import { StyleSheet, Pressable, TextInput, View } from 'react-native';
import { MaterialCommunityIcons } from '@expo/vector-icons';

import { useTogglePasswordVisibility } from './hooks/useTogglePasswordVisibility';

export default function App() {
  const { passwordVisibility, rightIcon, handlePasswordVisibility } =
    useTogglePasswordVisibility();
  const [password, setPassword] = useState('');

  return (
    <View style={styles.container}>
      <View style={styles.inputContainer}>
        <TextInput
          style={styles.inputField}
          name="password"
          placeholder="Enter password"
          autoCapitalize="none"
          autoCorrect={false}
          textContentType="newPassword"
          secureTextEntry={passwordVisibility}
          value={password}
          enablesReturnKeyAutomatically
          onChangeText={text => setPassword(text)}
        />
        <Pressable onPress={handlePasswordVisibility}>
          <MaterialCommunityIcons name={rightIcon} size={22} color="#232323" />
        </Pressable>
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#F5EEDC',
    alignItems: 'center',
    justifyContent: 'center',
    paddingHorizontal: 12
  },
  inputContainer: {
    backgroundColor: 'white',
    width: '100%',
    borderRadius: 8,
    flexDirection: 'row',
    alignItems: 'center',
    borderWidth: 4,
    borderColor: '#d7d7d7'
  },
  inputField: {
    padding: 14,
    fontSize: 22,
    width: '90%'
  }
});

Source code at this GitHub repo 🐙

체크 아웃 other blog posts React Native 및 Expo에 썼습니다 ✍️

👋