웹 UI/UX를 React Native 모바일 앱으로 구현하는 과정 배움
오늘 웹 기반으로 구상된 UI/UX를 실제 React Native 모바일 앱으로 구현하는 전체 과정을 경험하고, 그 과정에서 발생하는 주요 차이점과 해결 방법을 배움.
컴포넌트 기반 아키텍처 설계 및 상태 관리 배움
복잡한 화면을 기능 단위로 나누어 재사용 가능한 컴포넌트로 설계하는 방법을 익힘. 최상위 App.tsx가 전체적인 상태와 레이아웃을 담당하고, ProjectSidebar.tsx와 TodoView.tsx가 각각의 독립적인 기능을 책임지는 구조로 분리함. 여러 하위 컴포넌트가 공유해야 하는 데이터(프로젝트 목록, 할 일 목록)는 최상위 부모 컴포넌트(App.tsx)에서 useState로 관리함. 데이터를 변경하는 함수(예: addTodo, deleteProject) 또한 부모 컴포넌트에 정의하고, 이를 자식 컴포넌트에 props로 전달하여 자식이 부모의 상태를 변경할 수 있도록 구현함. 이는 "Lifting State Up" 원칙을 적용한 것임.
웹과 React Native의 주요 차이점 및 변환 배움
웹(Web)과 React Native 간의 주요 차이점과 변환 방법을 파악함.
<div>, <h1> 등)는 React Native의 기본 컴포넌트(View, Text)로 변환해야 했음.StyleSheet.create({})*를 사용하여 JavaScript 객체 형태로 스타일을 정의함.lucide-react) 대신, 네이티브 환경에 맞는 **react-native-vector-icons*를 사용하고, iOS 프로젝트에 네이티브 모듈을 연결함.Dialog나 Sheet 같은 복잡한 UI는 React Native의 <Modal> 컴포넌트를 활용하여 비슷한 사용자 경험을 구현함.네이티브 의존성 관리의 중요성 배움
아이콘 라이브러리처럼 네이티브 코드와 연결이 필요한 경우, npm install만으로는 부족하다는 것을 배움. iOS 프로젝트의 경우, ios 폴더로 이동하여 pod install 명령어를 실행해야만 네이티브 종속성이 올바르게 연결되고 앱이 정상적으로 빌드된다는 것을 확인했음.
아래와 같은 디자인으로 구성하려고 했지만
현재는 다음과 같음. 아이콘 오류, 프로젝트 탭이 닫히지 않는 오류를 수정해야 하는 것이 다음에 해결해야 할 과제이다.
