React Navigation으로 탭 구현함: @react-navigation/bottom-tabs를 사용해 프로젝트 탭과 캘린더 탭을 만듦.

• 상태 관리의 중요성을 깨달음 (State Lifting): 특정 화면(ProjectScreen)에 있던 상태(projects 데이터)를 공통 부모인 App.tsx로 끌어올림. 이렇게 하니 프로젝트 탭의 할 일 데이터를 캘린더 탭과 공유할 수 있게 됨.
• 화면 간 데이터 전달: 부모(App.tsx)가 가진 상태와 함수를 자식 화면(ProjectScreen, CalendarScreen)에 props로 넘겨주는 방식을 사용함.
• react-native-calendars 라이브러리 활용법을 익힘:
  • 단순히 캘린더를 띄우는 것에서 나아가, markedDates prop을 사용해 특정 날짜에 점(dot)을 찍어 할일이 있음을 시각적으로 표시함.
  • Calendar와 CalendarList 컴포넌트의 차이점을 몸소 체험하며, 상황에 맞는 컴포넌트 선택의 중요성을 배움.
• 컴포넌트 리팩토링: 거대했던 App.tsx의 역할을 분리하여 ProjectScreen, CalendarScreen 등 여러 개의 작은 화면 컴포넌트로 나눔. 코드 구조가 훨씬 깔끔해지고 관리가 쉬워짐.
• 이외
  • 상태 업데이트와 화면 전환 타이밍이 꼬여 앱이 멈추는 현상(경합 조건)을 해결함.
  • 리팩토링 후 발생한 잘못된 import 경로 문제를 해결함.
  • 캘린더 UI가 깨지는 문제를 해결하며 라이브러리 스타일에 대한 이해도를 높임.

사용된 주요 문법 및 기능

• ES6+ 문법:
  • 화살표 함수 (=>): onPress={() => someFunction()} 처럼 함수를 간결하게 정의함.
  • 구조 분해 할당: const { projects } = props; 와 같이 객체나 배열의 값을 쉽게 추출해 사용함.
  • 전개 구문 (...): 배열이나 객체를 합치거나 복사할 때 사용. [...oldArray, newItem] 형태로 상태를 업데이트하는 불변성을 지키는 데 핵심적임.
• React Hooks:
  • useState: 컴포넌트의 상태를 관리하기 위해 사용. const [value, setValue] = useState(initialValue);
  • useCallback: useFocusEffect와 함께 사용하여 화면 포커스 시 데이터 로딩 함수가 불필요하게 다시 생성되는 것을 방지함.
• TypeScript:
  • interface: Todo, Project 등 데이터 구조에 대한 타입을 명확히 정의함.
  • Props 타입 지정: 컴포넌트가 어떤 props를 받아야 하는지 명시하여 안정성을 높임.
  • Omit 유틸리티 타입: 기존 타입에서 특정 속성만 제외한 새로운 타입을 만드는 데 사용함.
• React Navigation:
  • createBottomTabNavigator: 하단 탭 네비게이터를 생성함.
  • Tab.Screen의 children prop: 컴포넌트에 직접 props를 전달하기 위해 component={...} 대신 children prop에 렌더 함수 (props) => <Component {...props} />를 전달하는 방식을 사용함.
• 조건부 렌더링:
  • && 연산자: isSidebarOpen && <ProjectSidebar /> 와 같이 특정 조건이 참일 때만 컴포넌트를 렌더링함.
  • 삼항 연산자: isCompleted ? '완료' : '미완료' 처럼 조건에 따라 다른 값을 보여줌.
• 배열 메소드:
  • .map(): 배열의 각 요소를 순회하며 새로운 배열(주로 컴포넌트 리스트)을 생성함.
  • .filter(): 특정 조건에 맞는 요소만 걸러내 새로운 배열을 만듦.
  • .sort(): 할 일 목록을 생성 시간 순으로 정렬하는 데 사용함.
• async/await:
  • AsyncStorage에서 데이터를 비동기적으로 불러오거나 저장할 때 사용. 코드의 가독성을 높여줌.