[React Native] To Do App - Button Touchable

Wordk Hard Travel Hard App

React Native 에서 어떻게 Button Click 을 다루는 지 배울 거고 그리고 어플에 어떻게 data를 input 하는지도 배울 거다. text input 에서 키보드를 어떻게 제어할지도 배울 거다.

웹에서 다루는 input 과 react native 에서의 input 과 어떻게 다른지도 배울거다. react native 에서는 form 같은게 없다.
그리고 데이터를 유지시키는 방법도 배울 거다. 왜냐면 유저가 뭔가를 적었을 때 폰의 저장소에 저장하고 싶으니까 말이다. 그래서 폰을 껏다 켜도 데이터가 그대로 남아 있게끔 말이다.

새로운 프로젝트를 시작하기 위해 프로젝틀르 관리할 디렉토리로 가서

blanked 선택해주자.

그리고 다시 콘솔 창에서 프로젝트가 있는 디렉토리를 들어간 다음에

npm start

를 해주면 프로젝트가 실행이 되고 Expo Go 에서도 실행을 시킬 수가 있다.

CSS 에는 없는 속성이 하나 있는데 (PaddingLeft / Right)
바로 padding Vertical 혹은 Horizontal 로 주는 것이다.
paddingVertical / paddingHorizontal 이다 수평방향 수직방향으로 주는 것이다.

header 에 justifiyContent : "space-between" 을 주고(그러면 Text 사이에 간극이 생긴다)

	export const theme = {
    

으로 colors.js 안의 theme 을 내보내주자.

버튼에는 3 가지 흥미로운 컴포넌트들이 있다.

Touchable

첫 번째는, TouchableOpacity View 와 비슷한건데 box 와 같다.
누르는 이벤트를 listen 할 준비가 된 view 라고 할 수 있다. Opacity 가 포함된 이유는 애니메이션이 포함되 있기 때문이다.

클릭하면 클릭되는 애니메이션이 생긴다. 누른 요소를 약간 투명하게 만들어 준다.

또 다른 한가지는 TouchableHighlight 이다. 더 많은 속성(Props) 들이 있다.

TouchabelOpacity는 우리가 클릭 되었을 때의 투명도 자체를 조절할 수 있다.

여기서 나아가 TouchableHighlight 는 배경을 검정으로 바꿔 주기도 한다.

TouchableHightlight 에는 onPress 라는 속성을 주어야 한다.
click 이벤트에 대한 리스너 역할을 하며
onPress onPressIn onPressOut onLongPress 이렇게 onPress 에도 종류가 있어서 행위를 내가 특정주지 않아도 속성값으로 지정해 줄 수 있다.

underlayColor 같을 주면 클릭이 눌러지는 동안에는 지정한 색깔로 변환된 게 화면에 출력된다.
보통 TouchableOpacity를 많이 사용하긴 한다.
또한 클릭 됐을때의 텍스트의 투명도도 activeOpacity

TouchableWithoutFeedback 이건 어떤 UI 변화도 없다.

Pressable 은 더 새로운 건데 더 많은 설정을 줄 수 있다.

hitSlope 이라는 중요한게 있다. 요소 바깥 어디까지 탭 누르는 것을 감지할지의 여부이다.