모바일 앱을 개발하다 보면 화면이 처음 나타날 때 데이터를 불러오거나, 화면이 사라질 때 리소스를 해제하고, 앱이 백그라운드로 내려갈 때 특정 작업을 처리해야 하는 경우가 많습니다.리액트 네이티브(React Native)는 기본적으로 React의 아키텍처를 따르기 때문에 React의 컴포넌트 생명주기를 그대로 사용하며, 추가적으로 모바일 환경에 맞는 앱 상태(AppState) 생명주기를 제공합니다.오늘은 함수형 컴포넌트(Hooks)를 기준으로 리액트 네이티브의 생명주기를 완벽하게 정리해 보겠습니다.1. 컴포넌트 생명주기 (React Hooks)과거 클래스형 컴포넌트에서는 componentDidMount, componentDidUpdate, componentWillUnmount 등의 메서드를 사용했지만, ..
안녕하세요! 리액트 네이티브(React Native)로 앱을 개발하다 보면 반드시 마주하는 과제가 바로 화면 이동(네비게이션) 입니다. 웹 개발에서 URL을 통해 페이지를 이동하듯, 앱에서도 화면 간의 전환과 데이터 전달이 필수적인데요.오늘은 리액트 네이티브의 표준 네비게이션 라이브러리인 React Navigation을 기준으로, 화면 간 데이터를 전달하는 route 객체의 활용법과 웹의 태그처럼 직관적으로 사용할 수 있는 Link 컴포넌트(to)에 대해 알아보겠습니다.1. 네비게이션과 route 객체 이해하기화면을 이동할 때 단순히 뷰(View)만 바꾸는 것이 아니라, 특정 데이터를 다음 화면으로 넘겨주어야 할 때가 많습니다. (예: 상품 목록에서 특정 상품을 클릭했을 때, 상품의 ID를 상세 페이..
1. useEffect란?컴포넌트가 렌더링될 때마다 특정 작업(API 호출, 이벤트 리스너 등록, 타이머 등)을 수행하도록 설정하는 Hook입니다.useEffect(() => { // 실행할 코드 (Effect) return () => { // 정리 함수 (Clean-up): 컴포넌트가 사라지기 직전에 실행 };}, [의존성배열]);패턴코드 형태실행 시점마운트 시 1회useEffect(() => {...}, [])화면에 컴포넌트가 처음 나타날 때만 실행 (API 호출 등)특정 값 변경 시useEffect(() => {...}, [count])count 값이 바뀔 때마다 실행매 렌더링마다useEffect(() => {...})의존성 배열을 생략하면 화면이 그려질 때마다 실행 (주의 필요)4. 실..
오늘은 리액트 네이티브 개발에서 가장 기본이 되면서도 중요한 useState 에 대해 알아보겠습니다.모바일 앱은 사용자 인터페이스(UI)가 끊임없이 변합니다. 버튼을 누르면 숫자가 올라가고, 입력창에 글자를 치면 화면에 바로 나타나죠. 이렇게 변하는 데이터 를 관리하기 위해 필요한 것이 바로 useState입니다.1. useState란 무엇인가요?useState는 리액트의 Hook 중 하나로, 함수형 컴포넌트 안에서 상태(State) 를 가질 수 있게 해줍니다.State(상태): 컴포넌트 내부에서 바뀔 수 있는 변수입니다.특징: 상태가 업데이트되면 리액트는 해당 컴포넌트를 자동으로 다시 리렌더링(Re-rendering) 하여 변경된 값을 화면에 보여줍니다.import React, { useState ..