Todo 앱 실습

https://dribbble.com/shots/6019952-Do-More-List-View/attachments/11196915?mode=media

• 목표 : 위의 디자인을 바탕으로 간단한 Todo App 제작

---

프로젝트 설정

터미널에서 입력

• npx create-expo-app 앱이름 --template blank
• npx expo login (expo go 앱과 연동을 빠르게 하기 위해)

---

TouchableOpacity

• 컴포넌트를 클릭했을때 깜박거리는 애니메이션을 주는 컴포넌트
• onPress 값을 줘서 이벤트 처리가 가능하다.

<TouchableOpacity>
	<Text style={styles.btnText}>Work</Text>
</TouchableOpacity>

TouchableHilight

• 터치했을때 조금더 다양한 설정이 가능한 컴포넌트
  1. activeOpacity : 클릭했을때 투명도 설정
  2. underlayColor: 클릭했을때 배경색 설정
  3. onPressIn,onPressOut: 터치 시작과 끝에 이벤트 처리가 가능하다.

TouchableWithoutFeedback

• 이벤트 처리를 하고싶은데 애니메이션이나 피드백이 필요 없는 경우 사용

pressable

• 터치를 감지할 수 있는 가장 최신의 래퍼 컴포넌트

---

기본 설정

• colors.js 파일을 새로 만들고 theme 오브젝트에 검정색 배경과(theme.bg) 회색 글씨(theme.grey)값을 넣어둔다.