React Native: 이벤트 처리 방식 (+useState())

💡 이벤트 처리 방식

• 웹에서 사용하는 방식과 동일: 이벤트 리스너를 추가 -> 이벤트 핸들러 함수에 연결 -> useState 훅을 사용해 컴포넌트에서 상태(State) 관리
• 이벤트 핸들러 함수에 연결하는 방법: React Native에서 컴포넌트에 제공하는 특수 이벤트 리스너 프로퍼티 사용
  
  
  
  

💡 이벤트 예시

  import { useState } from 'react';

  const [enteredGoalText, setEnteredGoalText] = useState('');

  function goalInputHandler(entetedText) {
      setEnteredGoalText(entetedText);
    }

  return (
    <Button title="Add Goal!" onPress={addGoalHandler}/>
    <TextInput onChangeText={goalInputHandler}/>
  );

useState()

• React 함수형 컴포넌트에서 상태(state)를 다루기 위한 훅
  - const [변수명, set변수명]: 배열 비구조화 할당
  - 변수명: 상태 값의 현재 값을 나타내는 변수
  - set변수명: 상태 값을 업데이트하는 함수(setter 함수, 보통 set + 변수명의 형태). 새로운 상태 값을 인수로 받아와서 컴포넌트를 리렌더링하고 상태 업데이트.
  - useState(): () 안에 상태를 정의하여 초기 상태 값 설정
  
  

이벤트 리스너 함수

• onChangeText={}: 함수를 값으로 취하며 함수를 지목
• onPress={}: Button 컴포넌트에서 사용 (웹의 onClick과 동일한 역할)
  -> {} 안에는 함수 이름만 넣어야 하므로, () 제외하기 (필요할 때 함수가 호출되어야 하는데, ()를 넣으면 렌더링되는 시점에서 함수가 호출됨)
  
  

자동 매개변수

• enteredText: 함수의 매개변수로 넣으면, 입력된 값을 자동으로 제공
  
  
  
  

** 훅(Hook): 함수형 컴포넌트에서 상태(state) 및 생명주기 기능을 사용할 수 있게 해주는 함수

** 배열 비구조화 할당: 배열의 값을 추출하여 여러 변수에 할당하는 방식으로, 배열의 각 요소를 간편하게 변수에 저장할 수 있음. 만약 이를 사용하지 않는다면 밑과 같은 형태.

const enteredGoal = usestate('');
const enteredGoalText = enteredGoal[0];
const setEnteredGoalText = enteredGoal[1];