[React-native] keyboard

사랑해요 Next.js

다들 react-native를 개발하면서 크로스 플랫폼 키보드의 악몽을 겪을 수 있다.
그게 바로나다

가장 좋은 예시는
키보드의 높이값을 계산해야 돼 !
키보드의 움직임에 따라 무언가 해줘야해 !

매번 키보드와 관련된 구현을 할 때마다
기획자와 디자이너에게 설명하며 지쳐있는 내 모습과 같다

그렇다면 시작해보자

💡 어떤 걸 구현하지 ?

내가 구현을 해야했던 건 키보드 높이값을 해당 컴포넌트가 계속 알고 있어야하는 상황이었다.
키보드가 내려가도 높이값을 알고 있는 컴포넌트의 자식요소에서 계속 컨텐츠를 바꿔줘야하는 구현을 했어야 했다.

💡 어떻게 구현하지 ?

일단 멋진 react-native에서 import로 Keyboard, KeyboardEvent를 가져와준다.

import { Keyboard, KeyboardEvent } from 'react-native';

그리고 추가로 내가 원하는 값 = 키보드의 높이값, 마지막 키보드의 높이값을 저장할 state를 하나 만들어준다.

  const [keyboardHeight, setKeyboardHeight] = useState(0); // 유동적인 키보드  높이
  const [lastKnownHeight, setLastKnownHeight] = useState(0); // 마지막으로 기록된 키보드 높이

이렇게 하고 이제 키보드에 리스너를 달아줘야한다.
리스너를 장착해주기 위해 함수를 하나 만들고 useEffect에 넣어보자

  useEffect(() => {
    function onKeyboardDidShow(e: KeyboardEvent) {
      setKeyboardHeight(e.endCoordinates.height);
      setLastKnownHeight(e.endCoordinates.height); // 마지막 높이 기록
    }

    function onKeyboardDidHide() {
      setKeyboardHeight(lastKnownHeight); // 키보드가 닫혔을 때 마지막 높이를 그대로 반환
    }

    const showSubscription = Keyboard.addListener('keyboardDidShow', onKeyboardDidShow);
    const hideSubscription = Keyboard.addListener('keyboardDidHide', onKeyboardDidHide);

    return () => {
      showSubscription.remove();
      hideSubscription.remove();
    };
  }, [lastKnownHeight]);

Keyboard.addListener엔 아래와 같은 메서드들이 있다 하지만 지금 내가 사용해야하는건 키보드가 열렸는가(onKeyboardDidShow), 키보드가 닫혔는가(onKeyboardDidHide) 이 두가지이기 때문에 나머지는 사용하지 않을 예정

keyboardWillShow
keyboardDidShow
keyboardWillHide
keyboardDidHide
keyboardWillChangeFrame
keyboardDidChangeFrame

💡 마무리 전체 코드

import { useEffect, useState } from 'react';
import { Keyboard, KeyboardEvent } from 'react-native';

export const useKeyboard = () => {
  const [keyboardHeight, setKeyboardHeight] = useState(0);
  const [lastKnownHeight, setLastKnownHeight] = useState(0); // 마지막으로 기록된 키보드 높이

  useEffect(() => {
    function onKeyboardDidShow(e: KeyboardEvent) {
      setKeyboardHeight(e.endCoordinates.height);
      setLastKnownHeight(e.endCoordinates.height); // 마지막 높이 기록
    }

    function onKeyboardDidHide() {
      setKeyboardHeight(lastKnownHeight); // 키보드가 닫혔을 때 마지막 높이를 그대로 반환
    }

    const showSubscription = Keyboard.addListener('keyboardDidShow', onKeyboardDidShow);
    const hideSubscription = Keyboard.addListener('keyboardDidHide', onKeyboardDidHide);

    return () => {
      showSubscription.remove();
      hideSubscription.remove();
    };
  }, [lastKnownHeight]);

  return keyboardHeight;
};

해당 기능을 여러군데에서 사용을 해야해서 hooks로 빼줬다.
항상 피하기만 하던 키보드 작업에 용기가 생긴 기분이다. 화이팅