이벤트 핸들러와 콜백 함수
프로젝트를 진행하면서, 초기 레이아웃을 구성할 때 바텀탭을 직접 디자인하여, 화면 하단에 띄워주는 방식으로 개발을 진행하고 있었는데 아무래도 기존 사용하는 바텀탭 라이브러리가 아니다 보니 컴보넌트와 스크린간 데이터를 주고받는것이 쉽지 않음을 느꼈다
우리는 이제 버튼을 누르면, 각 탭이 전환되도록 구현하고자 하였고 많은 경험 후 해당 기능을 구현할 수 있었다
이벤트 핸들러
이벤트 핸들러(EventHandler)는 특정 이벤트가 발생했을 때 실행되는 함수입니다. 예를 들어, 버튼을 클릭하거나 입력 필드에서 텍스트를 입력할 때와 같은 사용자의 상호작용에 대응하여 원하는 동작을 수행할 수 있습니다. 이벤트 핸들러는 일반적으로 이벤트가 발생한 요소에 연결되어 실행됩니다.
콜백 함수
콜백 함수(Callback Function)는 다른 함수에 전달되어 나중에 호출되는 함수입니다. 콜백 함수는 비동기적인 상황에서 많이 사용됩니다. 예를 들어, 타이머 함수에서 일정 시간이 경과한 후에 실행되는 함수나, 비동기 작업이 완료된 후에 실행되는 함수 등이 콜백 함수로 사용될 수 있습니다.
과정
Main.js
return (
<View style={{ flex: 1 }}>
<View style={{ flex: 1, width: '100%' }}>
<Header />
</View>
<View style={{ flex: 4, alignItems: 'center', marginTop: 120 }}>
{activeTab === 0 ? <HomePage /> : <MyPage />}
</View>
<View style={{ flex: 1, backgroundColor: 'white' }}>
<BottomTab
onTabChange={(tab) => setActiveTab(tab)}
/>
</View>
</View>
);먼저, 메인화면은 다음과 같이 구성하여 주었다
우리는 헤더에 아래 스크린샷에서 볼 수 있듯 버튼을 사용하기 위하여 헤더 부분을 구성하였고
중앙에는 흔히 우리가 보는 스크린이 나타난다. 이 스크린은 아래 바텀탭 요소를 선택하여 화면을 전환시킬 수 있고 onTabChange prop을 호출하면 tab 인자를 받아 setActiveTab 함수를 호출하여 activeTab 상태를 업데이트 시킵니다
BottomTab.js
<TouchableOpacity
style={styles.homeMenu}
onPress={() => {
home();
}}
>다음과 같이 바텀탭에는 원하는 요소의 onPress prob에서 콜백 함수를 전달하고 home 메서드를 호출한다
const [tab, setTab] = useState(0);
const home = () => {
setTab(0);
onTabChange(0);
console.log(tab);
};home 메서드에는 setTab 메서드로 BottomTab.js 내에서의 각종 이벤트들을 처리하도록 tab 변수의 값을 변경해주고, 아까 우리가 설정했던 OnTabChange prop을 호출하여 Main.js 에서도 해당 상태값에 대하여 알 수 있는 것이다
결과
해당 화면은 메인화면이다
메인화면에서 바텀탭 중 MY 라고 써진 탭을 선택하면 위 스크린이 변경되도록 코드를 작성하고자 하였다
이렇게 클릭하면, 해당 탭으로 화면 전환하는 것을 볼 수 있다
댓글