[RN] React Native 이벤트 처리하기

 

이벤트 처리 방식은 웹용 React와 같은 방식으로 작동한다.

이벤트 핸들러 함수에 연결 후 useState훅을 사용해서 컴포넌트에서 state를 관리한다.

 

사용자가 내용을 입력 후 추가 버튼을 누르면 내용 보여주는 앱 만들기

export default function App() {
  const [enterText, setEnterText] = useState("");

  function inputHandler(enteredText) {
    console.log(enteredText);
  }

  return (
    <View style={styles.appContainer}>
      <View style={styles.inputContainer}>
        <TextInput
          style={styles.textInput}
          placeholder="입력하기"
          onChangeText={inputHandler}
        />
        <Button title="추가" />
      </View>
      <View>
        <Text>내용</Text>
      </View>
    </View>
  );
}

 

사용자가 TextInput에 내용을 입력할 때 해당 입력값을 가져오기 위해서 inputHandler라는 함수를 만들기

이 함수를 연결하기 위해서 RN에서 컴포넌트에 제공하는 onChangeText 이벤트 리스너 프로퍼티를 사용하면 된다.

inputHander 함수의 매개변수로 입력된 값을 제공하기 때문에 console에 찍어보면 입력된 값을 자동으로 받을 수 있는 걸 확인할 수 있다.

 

 

이제 추가 버튼을 누르면 내용을 확인하려고 한다.

import { useState } from "react";

export default function App() {
  const [enterText, setEnterText] = useState("");

  function inputHandler(enteredText) {
    setEnterText(enteredText);
  }

  function addHandler() {
    console.log(enterText);
  }

  return (
    <View style={styles.appContainer}>
      <View style={styles.inputContainer}>
        <TextInput
          style={styles.textInput}
          placeholder="입력하기"
          onChangeText={inputHandler}
        />
        <Button title="추가" onPress={addHandler} />
      </View>
      <View>
        <Text>내용</Text>
      </View>
    </View>
  );
}

 

웹에선 onClick 프로퍼티를 사용하면 되지만, RN에선 버튼에 해당하는 프로퍼티가 없다.

대신 비슷한 프로퍼티인 onPress를 사용하면 되는데 onClick이 아니라 onPress라고 부르는 이유는

모바일엔 클릭이 아니라 탭이나 누르는 press 제스처를 사용하기 때문.

onChangeText처럼 실행할 함수를 지목해서 버튼을 탭 할 때마다 함수를 실행하도록 한다.

 

현재 입력된 텍스트를 추적하기 위해 TextInput 입력값을 상태로 저장해야한다.

상태관리는 React앱과 동일하게 작동하며 React에서 useState훅을 불러올 수 있다.

다음 새로운 상태를 등록하기 위해 useState를 사용해서 enterText라는 상태 변수를 만들고 초기값은 빈 문자열로 설정한다.

 

TextInput으로 사용자 입력을 받고, 입력된 텍스트를 매개변수로 받아와서 enterText 상태를 업데이트 한다.

상태가 업데이트 됐는지 확인하기 위해 콘솔을 찍어보면 내용을 입력하고 버튼 클릭 시 현재 값이 콘솔에 찍히는 걸 볼 수 있다.

 

 

 

이제 내용을 화면에 추가하기

import { useState } from "react";

export default function App() {
  const [enterText, setEnterText] = useState("");
  const [todo, setTodo] = useState([]);

  function inputHandler(enteredText) {
    setEnterText(enteredText);
  }

  function addHandler() {
    setTodo((currentTodo) => [...currentTodo, enterText]);
  }

  return (
    <View style={styles.appContainer}>
      <View style={styles.inputContainer}>
        <TextInput
          style={styles.textInput}
          placeholder="입력하기"
          onChangeText={inputHandler}
        />
        <Button title="추가" onPress={addHandler} />
      </View>
      <View>
        {todo.map((item) => (
          <Text key={item}>{item}</Text>
        ))}
      </View>
    </View>
  );
}

 

화면에 표시할 목록도 동적으로 변경되는 데이터이기 때문에 또 하나의 상태를 추가하기.

todo라는 상태변수와 업데이트할 setTodo함수를 만들고 초기 상태는 빈 배열로 설정한다.

 

addHandler함수에서 입력된 텍스트를 화면에 출력하기 위해서 setTodo함수를 호출해서 목록 상태를 업데이트 한다.

상태 업데이트 함수는 기존 상태를 자동으로 수신하기 때문에 기존 내용에 새로운 내용을 덧붙이는 방식으로 업데이트 할 수 있다.

 

그 다음 목록을 출력하기 위해서 map 메서드를 사용해서 배열의 각 항목을 JSX요소로 매핑하고, 각 항목엔 고유한 key 속성을 넣어야한다. 동일한 텍스트를 두번 입력할 수 있기 때문에 고유하진 않지만, 문자열을 key값으로 설정했다.