[React Native] 리액트 네이비브 디버깅 하는법, 키보드 가릴때, 상태값 변경에 대해

리액트 네이티브에서 사용하는 몇가지 속성과 디버깅하는 방법에 대해 알아보자.

---

먼저 디버깅 하는법

 

# 디버깅

• 안드로이드 : command + M 개발자 메뉴에서 Debug with Chrome 선택
• iOS : command + D 개발자 메뉴에서 Debug with Chrome 선택

 

* 열리지 않는 경우 localhost:8081/debugger-ui 로 실행

  크롬브라우저에서 command+option+I로 개발자 메뉴 열어서 디버깅할 수 있다.

---

# KeyboardAvoidingView

  텍스트를 입력할때 키보드가 input box를 가리지 않게 하기 위해 사용한다.

  ios와 안드로이드를 구분하여 아래와 같이 사용할 수 있다.

<KeyboardAvoidingView
  begavior={Platform.OS === ‘ios’ ? ‘Padding’ : undefined}
>
</KeyboardAvoidingView>

 

  OS를 구분하는 방법으로 아래와 같이 Platform.select 로도 구분할 수 있다.

<KeyboardAvoidingView
  begavior={Platform.select({ios: ‘padding’, android: undefined})}
>
</KeyboardAvoidingView>

 

  좀 더 간결하게 사용하기

<KeyboardAvoidingView
  begavior={Platform.select({ios: ‘padding’})}
>
</KeyboardAvoidingView>

---

# TextInput 속성의 returnKeyType

  TextInput에 텍스트를 입력할때 키보드의 입력 버튼 (확인버튼)을 어떤 문구로 보여줄지를 정할 수 있다.  

<TextInput 
  style={}
  value={text}
  returnKeyType=“done”
/>

 

  아래는 returnKeyType의 종류로 설정하면 해당 문구로 표시할 수 있다.

returnKeyType=“done”    // 완료
returnKeyType=“go”      // 이동
returnKeyType=“next”    // 다음
returnKeyType=“search”  // 검색
returnKeyType=“send”    // 보내기

---

# useState

  사용자가 TextInput에서 텍스트를 입력하거나 수정할때 값을 유지하는 방법으로 useState가 있다.

 

  useState를 선언해준 후에 TextInput에서 보여줄 text를 value에 넣어주고,

  텍스트를 수정할때마다 발생하는 onChangeText 속성에 setText를 넣어주게 되면

  useState에 의해 변경될때마다 변경된 텍스트가 setText 되고 TextInput의 value는 text에서 가져와서 보여주게 된다.

const [text, setText] = useState(‘’);

<TextInput 
  value={text}
  onChangeText={setText}
  returnKeyType=“done”
/>