[React Native] ToDo App 만들기 - 화면 전환 디자인

style 을 어떻게 object 로 사용하면서 동시에 확장했었는지 생각해보자.
이중 중괄호를 열어주고 ... 을 찍어주면 기존의 style을 가져오면서 상황에 맞게 내가 원하는 스타일을 넣어 줄 수가 있다.

TextInput 만 있다. (HTML 처럼 textarea 없다)

TextInput

TextInput 은 React Native 에서 유일하게 입력을 받을 수 있는 방법이다.

다양한 Props 가 있다.

Focus : 화면을 누르면 입력할 준비가 되는 것.
onPressIn
onPressOut
onChangeText
onChange

이렇게 CSS 를 해주면 둥글게 나온다.

working state 의 참/거짓 여부에 따라 보여지는 UI가 다르다.

keyboardType : 가끔 유저가 이메일이나 전화번호를 입력해야 하는 경우에 사용한다.

그러면 이렇게 키보드 모양이 바뀌는 걸 볼 수 있다.

또한 secureTextEntry를 해주면 입력받는 비밀번호의 값들을 안보이게끔 해줄 수 있다.

이렇게 props 로 값을 주는 게 개발자들이 시스템을 설정하는 방법이다.

react 는 component 와 props 의 조합으로 어떠한 플랫폼으로도의 접근성을 높여준다.

multiline 여러줄 쓸 수 있게 된다.

onChangeText

잘 출력 되는 걸 볼 수 있다. TextInput 안에 onChangeText 를 넣어주면 된다.

브라우저에는 target , event 들이 있지만 여기는 없다.

autoCapitalize 라는 Props 를 설정해서 대문자 관련한 처리를 해줄 수도 있다.

입력값 state에 저장

다음으로 유저의 입력값을 state 에 저장해야 된다.
TextInput 이라는 Component 에 value 를 줌으로써 control 을 획득할 수 있다.
그리고 유저가 뭔가를 입력하면 setText 함수를 이용해 state 값을 변경해 줄 수 있다.

이렇게 하면 유저가 입력을 눌렀을 때 알림창이 뜨는 걸 확인 할 수 있다.

아무 것도 입력 한채 완료를 누른 경우도 처리해 주고

ToDo 목록들을 담을 자료형을 보통은 배열을 쓰겠지만 여기서는 해쉬맵을 위해 Object 로 만들어 줬다.
https://www.youtube.com/watch?v=HraOg7W3VAM

우리는 절대로 직접 state를 수정하면 안 되기 때문에 이전의 state을 가져와 복사하고 새로운 것과 결합시켜야 한다.

Object assign 을 쓸 것이다.

target 이 새로운 object 가 된다. source1 에는 기존의 object 를 넣어주고 그 뒤에는 추가를 해주면 된다. 또한 변수를 key 로 사용해 주려면( 기존의 데이터 구조를 따라가기 위해 [] 이렇게 대괄호를 사용해주면 된다.)

세 개의 Object 를 결합해 주었다.

만약 Object.assign 이 잘 이해가 안된다면 다른 방법이 있다. ES6 의 마법.

{toDos}
말고
{...toDos} 를 해주면 object 의 내용을 받아 올 수 있다. 

이렇게 하면 object 인 toDos 안의 내용을 가져와서 새롭게 할당해 주는 것이고,

이렇게 하면 새로운 object 인 newToDos2 를 만드는데 새롭게 만들어진 object 안에 들어가는게 또 object 인 toDos 가 들어가는 것이다. 즉 object 안에 또 object 가 중첩되어 들어가는 것이다.

여전히 폰에서의 입력값을 잘 받아오는 것을 확인 할 수가 있다.

이제 toDos 를 paint 해보자. 우선 ScrollView를 import 해오고

이렇게 적어준 다음은 어떻게 할까?

보통 배열(Array)을 활용한 경우에는 map 을 사용했지만
Object 인 경우에는? 어떻게 할까

Object.keys(대상 오브젝트) 를 하면 Object key 들의 Array 를 보여준다. 그러면 이제 Array 를 가졌기 때문에 여기에 map을 쓸 수가 있다.

key 들을 가져온 다음 거기에 map 을 해준다. 그리고 map 을 해준 대상은 key 값들이기에 다시 Objecy 에서 해당 key 에 따른 value 를 호출해준다.

Object.keys 와 map 의 조화로 Text 컴포넌트를 return 해주는 걸 만들었다.

이렇게 출력이 되는 걸 볼 수 있다. 이제 꾸며주자!!

colors.js 에 자주 사용할 컬러값을 넣어주고.

이렇게 CSS 를 꾸며주면

이렇게 화면이 잘 나오는 걸 볼 수 있다. 또한 ScrollView 이다.