본문 바로가기

모바일 개발/React Native-이론

카카오톡 클론코딩 친구리스트 만들기 친구 리스트 만들 때는 내 프로필과 구분되는 division 선을 두고, 그 밑에는 친구와 친구 명 수 나타내는 구간이 필요하다. (FriendSection) 그리고 친구 리스트를 토글 할 수 있는 화살표가 필요하다. 친구 리스트는 data.js에 저장된 임시 데이터들을 가져와 사용한다. (FriendList) 임시 데이터들은 객체가 배열로 정렬되어 있다. 1. 코드 리뷰 (1) App.js 에서 모듈 간의 관계 한 번에 보기 //onPressArrow 로직은 아직 안 짰고, 클릭시 로그에 뜨는 것만 만들었다. const onPressArrow = () => { console.log("clicked arrow") } 친구 리스트 배열의 길이는 친구리스트를 저장해놓은 배열 friendsProfile.len.. 더보기
카카오톡 클론코딩 My Profile 만들기 Myprofile 용 모듈을 새로 만들어서 내용을 적은 뒤 import 그림과 글들 사이에는 flex-direction row를 횡으로 가도록 글 끼리는 열로 가도록 설정, Margin을 주는 모듈을 만들어서 상태바, 프로필, 또 프로필 내용들 사이에 margin 주기 Margin Module을 쓰는 이유는 해당 Margin을 줘야하는 경우가 많을 것 이기 때문에 계속 로 주는 것보다 이를 위한 컴포넌트를 하나 만드는 게 낫다. 0. iphone-x-helper는 이제 서비스를 종료함. 이것을 대체하는 git-hub 내용 GitHub - th3rdwave/react-native-safe-area-context: A flexible way to handle safe area insets in JS. Als.. 더보기
React-Native 상단 Bar 만들기 1. 고려해줘야 할 부분 우선 휴대폰 화면을 보면 맨 상단에는 베터리 잔량 및 알림들이 나열 되고 있고, 하단 bar에는 홈으로, 나가기 버튼 등이 있다. 우리가 이것들의 영역을 고려하지 않고 앱을 만든다면, 내가 만든 앱의 상단 바가 핸드폰의 베터리 잔량이나 알림 부분과 겹칠 수 있다! 2. 핸드폰의 고유 상단, 하단 영역을 침범하지 않는 앱을 만드는 조치 2가지 (1) SafeAreaView 사용 // 장착 import { SafeAreaView } from 'react-native'; // SafeViewArea 이용 해당 컴포넌트 이용 시, 자동으로 핸드폰 자체 상단 하단 바를 침범하지 않고 그 안쪽에서 작업을 할 수 있게 해준다. 해당 는 자동으로 안쪽 영역에서 작업이 이루어진다. 하지만 해당 .. 더보기
재 사용을 통한 SourceCode 간결화(props, CustomHook 이용) 회원가입 화면을 구성하는 컴포넌트들 간의 로직은 같다. 모두 값을 받아서 백엔드로 보내준다. 만약 올바르게 입력 안 했을 경우에는 오류 메세지 띄운다. 초기화 버튼이 있다. 만약 이 같은 로직의 컴포넌트를 여러 개 작성한다면, 중복코드도 많고, 코드량이 길어져 가독성이 떨어질 것이다. 이를 막기 위해 통일된 하나의 로직을 만들고, 해당 로직을 호출할 때, 쓰는 인자 값을 달리함으로써, 코드 재사용성을 높인다. 또한 Custom Hook이라는 커스터마이징한 훅을 만들어, 같은 로직의 useState를 하나로 통일하고, 여기 넣는 인자들을 달리 함으로써 코드 재사용성을 높일 수 있다. 1. 코드 리뷰 import React, { useState } from 'react'; import {Button, Tex.. 더보기
컴포넌트의 생명주기와 useEffect 1. 클래스 컴포넌트의 생명주기 클래스 컴포넌트는 생명 주기를 가지고 있다. 클래스 컴포넌트가 시작할 때 생성자가 생성되고, render() 함수는 컴포넌트가 돌아갈 때 생성이 된다. 그리고 컴포넌트가 처음 시작할 때, Spring 전 처리기 처럼 componentDidMount가 시작된다. componentDidUpdate는 컴포넌트가 run 되는 도중에, 업데이트(사용자의 움직임, 그에 따른 피드백)가 있을 때마다 호출 된다. 마지막으로 컴포넌트가 종료될 때 componentWillUnmount가 호출된다. 클래스 컴포넌트 내부에는 componentDidMount, componentDidUpdate, componentWillUnmount라는 함수가 따로 존재하고, 이들이 자신이 호출되어야 하는 타이밍.. 더보기
Hooks - useState 이용 1. 개념정리 (1)Hooks란? 본래 함수형 컴포넌트에서는 불가능 했던, 상태관리나 주기관리를 할 수 있도록 도와주는 것 (2)useState란? Hooks의 한 종류로서 함수형 컴포넌트의 상태를 가변적으로 관리할 수 있도록 해준다. a. 형태 // import로 장착 필요 import {useState} from "react"; // 사용 const [value,setValue] = useState(초기값) b. 특징 -useState()는 배열로서 첫 번째 원소에는 value를 두 번째 원소에는 value를 바꿀 수 있는 함수 setValue가 들어있다. -useState()는 Boolean, String, number 형 변수 모두 사용 가능하다. - View 안에서 setValue 사용법은 다음.. 더보기
Props 객체 인자 이용하여 카톡 프로필, 친구목록 만들기 props는 상위 컴포넌트에서 받은 속성값들을 하위 컴포넌트에 전달해주는 객체이다. 상위 컴포넌트에서 받은 속성 값들은 props에 멤버로 들어간다. 카톡 프로필은 내 프로필이든, 친구들 프로필이든 로직이 같다. 따라서 카톡 프로필 하나하나 하위 컴포넌트로 만들어 버리면, 중복코드가 많아져서 가독성이 떨어진다. 이를 위해 프로필 로직은 하나만 만들고, 각 프로필마다 다른 인자 값들을 props로 넘겨 받아 만드는 것이 훨씬 효율적이다. 여기서 해볼 것은 하나의 프로필 로직을 만들고, 프로필 별로 다른 값들을 props로 받아서 구현할 것이다. 하위 컴포넌트를 선언한 부분과 호출한 부분이 따로 나뉘는 걸 볼 수 있다. 호출한 부분에서 받은 속성 값들을 props가 멤버로 받아서 선언 부분에 전달해준다. 1.. 더보기
Core Component 핵심 구성 요소 뜯어보기 1. 구조 뜯어 보기 일단 처음 들어봐서 정확하게는 모르겠고 큰 구조가 무엇을 의미하는지 뜯어 보겠다. // import칸 // import 필요한 구문 나오면 react가 자동으로 import 해줌. // 근데 내가 잘못 써서 약간 지웠다가 다시 하면, 자동 import 안 해줌. 이거 조심하자 1시간 해맸다. import { StatusBar } from 'expo-status-bar'; import { Button, Switch } from 'react-native'; import { Image, ScrollView, StyleSheet, Text, TextInput, View } from 'react-native'; // 본문 - app의 내용 export default function App().. 더보기

티스토리툴바