나의 개발일지 3 - 앱개발 종합반 앱화면 만들기 앱 필수 기초지식, Expo 앱다운 앱기능

나의 개발일지 3 - 앱개발 종합반 앱화면 만들기 

앱 필수 기초지식, Expo 앱다운 앱기능

 

목차

1. 앱 필수 기초지식 - 컴포넌트, 속성, 상태, useEffect
2. 앱 상태 바(Status Bar) 관리
3. 스택네비게이션
4. 페이지 내용 공유하기, 외부 링크 클릭 이벤트

 

 

1. 앱 필수 기초지식

1.1 컴포넌트

정해진 엘리먼트를 사용하여 만든 화면의 일부분 즉, 화면의 모든 부분

UI의 요소, 요소를 재사용 가능한 부분으로 조각내서 운영하는 기법이다. 

리액트 기반으로 만들어진 페이스북 웹사이트는 운영되는 컴포넌트가 수만가지라고 한다.

   → 화면의 모든 부분을 말함

1.2 상태 

컴포넌트에서 데이터를 유지하고 관리하기 위한 유일한 방법 즉, 사용할 데이터

데이터라고 불러도 되지만 리액트에서는 컴포넌트에서 보유/관리되는 데이터를 상태(State)라고 부른다.

만드는 화면은 데이터에 따라 변경되는데, 이 데이터는 아무 데이터가 아니라 이 상태(State)로 관리되는 데이터가 변경되면 화면이 바뀐다.

UI = component(state)

상태와 컴포넌트의 관계를 공식으로 표현 

즉, 사용자 화면 UI는 컴포넌트(component)에 어떤 데이터(State)가 주입되고 변경되냐에 따라 변화된다는 뜻

1.3 속성

상위 컴포넌트에서 하위 컴포넌트로 데이터를 전달하는 방식 즉, 데이터 전달

1.4 useEffect 

화면에 컴포넌트가 그려지면 처음 실행해야 하는 함수들을 모아두는 곳

useEffect(()=>{
...화면이 그려진 다음 가장 먼저 실행돼야 할 코드 작성 공간
},[])

보통 useEffect는 데이터를 준비할 때 사용한다.

데이터를 준비한다는 것은, 데이터를 서버로부터 혹은 어디선가로부터 받은 후 상태(Stste)에 반영한다는 것을 뜻한다. 

순서는,

1. 화면이 그려진다.
2. useEffect가 데이터를 준비한다.
3. 상태 데이터가 업데이트되었으니 화면이 다시 그려진다.

화면이 그려진 다음, 서버에게 필요한 데이터를 요청하여 받은 후 화면을 다시 그릴 때 주로 사용된다.

 

2. 앱 상태 바(Status Bar) 관리

2.1 상태 바?

앱이 앱에 따라 모바일 맨 위 상태 바가 변하는 앱이 있다. 

핸드폰 배터리 남은 상태 표시 되는 곳!

 

 

3. 스택네비게이션

3.1 네이게이션이란?

웹사이트를 이용하듯, 앱에서 만든 컴포넌트들을 페이지화 시켜주고 해당페이지끼리 이동가능하게 해주는 라이브러리

이 라이브러리도 Expo에서 지원하고 있는 도구.

3.2 스택 네이게이션이란?

컴포넌트에 페이지 기능을 부여해 주고 컴포넌트에서 컴포넌트로 이동, 즉 페이지 이동을 가능하게 해 준다.

컴포넌트를 페이지화 시키는 스택 네이게이션.

페이지처럼 만든 컴포넌트를 정말 페이지처럼 사용할 수 있게끔 페이지로 컴포넌트를 감싸 페이지로 만들어준다.

이렇게 만든 여러 페이지들을 책갈피 기능을 하는 스택 네비게이터에 등록시켜 언제든지 이 페이지 이동이 가능하게끔 해 준다.

페이지는 Stack.Screen

책갈피는 Stack.Navigator라고 부른다.