📱React Native 📱 Instagram

리액트 네이티브로 인스타그램 클론하기
-Day 1 : 노마드코더 ToDoList
https://youtu.be/zG7328Qm0LQ

리액트에 대한 전체적인 파악을 하기 위해서 시작했다. 하지만 오타를 찾기 위해 몇십분을 허비하고 나서 그냥 직접 하면서 공부해야 겠다는 생각이 들어서 인스타그램을 시작했다

해야 하는 것
1. 로그인 화면 디자인 ( Day 1, 2)
2. 로그인 화면 이벤트 추가 ( Day 2)
3. 메인 화면 디자인
4. 메인 화면 이벤트 추가

로그인 화면 디자인

우선 두가지 버전이 있다.
1. 아이폰 5

리액트 네이티브에서는 div, span과 같은 태그가 없고 리턴할 수 있는 컴포넌트가 정해져있다.
그래서 내가 쓰고자 하는 컴포넌트를 이런 식으로 정의해야 한다.
디자인을 적용하고자 하는 StyleSheet를 써야 한다면 위에도 적어주어야 한다. 다른 컴포넌트도 마찬가지이다.
Dimensions 이 굉장히 흥미로운데

const { width, height } = Dimensions.get("window");

Dimensions를 통해서 내가 가지고 있는 기기의 스크린의 크기를 가져올 수 있다. width - 30 이런 식으로 크기를 정할 수 있다.

2. 아이폰 6~8
   

서로 다른 사이즈, 다른 UI 구성을 만들며 느낀 것인데 개발자라면 스마트폰의 출시가 그다지 반갑지 만은 않을 것 같다. 이런 간단한 로그인 화면에서도 글자의 간격, 들어가는 문구의 위치에 대한 결정이 이루어져야 하기 때문이다.

로그인 화면 기능

render() {
    const { id, pw } = this.state;
    // 이 코드는 아래와 같은 코드이다.
     const id = this.state.id;
     const pw = this.state.pw;

저 부분을 왜 저렇게 쓰는지 이해가 안가서 멘토님에게 물어보니 이건 비구조 할당에 대해서 알려주셨다.
대부분의 개발자들이 state안에 있는 값을 가져와서 사용할 때 그 변수를 state 의 키와 똑같이 쓰기 때문에 그런 과정을 간결하게 한 것이라고 한다. 더 자세한 부분은 내일 공부해보아야겠지만 자바스크립트, 리액트에서 중요한 부분인 것 같아서 따로 포스팅 해야 할 것 같다.

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment