리액트 네이티브

리액트프로젝트가 끝나고 바로 네이티브로 들어갔다.

빠르게 진행되다보니까 리액트도 완벽하지 않은데 벌써 네이티브라고..?라는 생각이 들었지만 문법적으로 쪼금 다를 뿐 많이 다르지않아서

리액트공부를하면서 같이 진행해도 좋을꺼같았다....ㅎ

뭔가 계속 투두앱을 기본으로 진행이 되는거라 예시가 지루할 수 있지만 CRUD가 투두만큼 잘 되어있는게 없어서 이 예시로 진행되고 있다.

다행인건 리액트로 투두앱을 만들었어서 많이 낯설지가 않았다는 점ㅋㅋ 그대신 웹 대로 만들면 마음만큼 안만들어진다는 점...

그래서 오늘 주제는 진짜 간단하지만 시간은 엄청 잡아먹은 버튼 주제다...하😱

1.만난 큰 산..?

카테고리 별로 투두를 다르게 적고 싶었기 때문에 카테고리를 누를 수 있어야한다고 생각을하고 (당연히 웹을 만들때처럼?) 버튼으로

구성을 짰다. 이미지를 보자면 이렇게 되어 있었는데(이 이미지는 완성 본)

<button>으로 만드니까 이상하게 자꾸 속성이 먹히질 않았다. 공식문서를 찾아봐도 버튼에 대한 속성을 주는 예시도 없었고....

2.시도

App.js > List.js + Button.js 구조로 컴포넌트를 짜놓은 상태였다.

그래서 button구조 하나하나마다 <button styles={{backgroundColor: yellow}} <<<<이런식으로 주었는데

깔끔하자고 나눈 컴포넌트에 오히려 저렇게 스타일을 주니까 더 코드가 많아졌고 이렇게 해도 안먹히는 부분이 더 많았다...

3.해결

구글링과 stackoverflow를 보니까 <TouchableOpacity>와<pressable>이라는 속성을 알게되었다.

<TouchableOpacity>
    <View> 
    <Text>  </Text> 
    </View>
 </TouchableOpacity>

이렇게 감싸주면 저 텍스트가 버튼 역할을 할 수 있게 해준다고 했다.

그러면서 이 버튼을 누르게 되면 UI적으로 터치가 된것처럼 하얗게 눌렸다가 다시 색깔이 돌아오는 기능을 가지고 있었다.

그래서 한번 해보니까 바로 해결....🏁

Text를 감싸는 태그들에게 스타일을 emotion을 사용해서 주니까 속성도 잘 먹히고 원하는대로 UI가 나왔다.ㅋㅋ

<pressable>옆에 new✨라고 공식문서에 붙어있던데 그나마 새로나온 태그인거같다. 나중에는 이것도 써봐야지

4.알게된 점

공식문서에 없는건 왜 없는건지 알았다.

이번 만큼 공식문서를 샅샅히 뒤진적이 없었는데 버튼에 속성을 주는 것을 볼 수가 없어서 왜 그러지 하고 생각을 하면서도 또 찾았다.

약간 텍스트속성에 다른 속성을 주어서 버튼역할을 주고 싶지 않았고 버튼을 이용해서 간단하게 코드를 짜고 싶었기 떄문이다.

근데 없는 이유가 있었다..ㅋㅋㅋ 뒤늦게 올라온 튜터님 보충 강의보니까 버튼은 속성을 안먹는다고 한다...ㅎ

이런 간단한 이유였는데 시간은 엄청 잡아먹었다...삽질하면서 얻은 지식👍

그래도 시간 버린거라곤 생각안한다 ㅠ 저렇게 찾으면서 '아 이런속성도 있구나' 하면서 공식문서를 많이 읽었기 떄문이지....🥲

그래도 과제 내주신거 만큼 다 만들어봐서 뿌듯하게 끝😎

codedive01