[앱개발 종합반] 3주차 개발일지

#3주차 배운 내용

 

1. 상세 화면 페이지 만들기

 

꿀팁앱에서 글 목록에서 하나를 눌렀을 때 이렇게 상세페이지가 나오게 하는 화면을 구현했다. 

 

2. 리액트 필수 지식

 

1) 컴포넌트(Component)

컴포넌트는 정해진 엘리먼트들(요소)을 사용하여 만든 화면의 일부분 컴포넌트는 즉, 화면의 모든 부분.
그리고 컴포넌트란 App.js의 큰 App 함수처럼, 코드 전체를 감싸고 있는 함수를 뜻하기도 함. 따라서 App.js를 App 컴포넌트라고도 부를 수 있음.

 

2) 속성(Props)

상위 컴포넌트에서 하위 컴포넌트로 데이터를 전달하는 방식 == 그냥 데이터 전달!

속성은 쉽게 생각해서 컴포넌트에 데이터를 전달한다는 것. 그 전달 모습은 키와 벨류의 형태.

예시 - <Text> 태그엔 numberOfLines이란 속성이 있음. (말줌임표 효과를 줌)
<Image> 태그엔 resizeMode란 속성이 있음. 이미지가 영역을 차지하는 방식임.

예를 들어 Card를 사용하는 곳에서<Card image={'이미지 주소'}/> 라고 속성을 써 넣으면, 
이 <Card/>는 image라는 속성이름에 {'이미지 주소'} 값을 을 갖게 됨. 즉 키와 벨류의 값을 갖게 된다.

 

3) 상태(State) - useState와 useEffect

State는 컴포넌트에서 데이터를 유지하고 관리하기 위한 유일한 방법 == 그냥 사용할 데이터!

컴포넌트마다 데이터를 보유하고 관리 할 수 있다. 데이터라고 불러도 되지만, 리액트에서는 컴포넌트에서 보유/관리 되는 데이터를 상태라 부른다. 리액트에서 상태(state)는 리액트 라이브러리에서 제공해주는 useState로 생성하고 setState 함수로 정/변경 할 수 있다.

UI = component(state)

저 공식은 즉, 사용자 화면(UI)는 컴포넌트(component)에 어떤 데이터(state)가 주입되고 변경되냐에 따라 변화된다를 뜻한다.

 

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

useEffect(()=>{

	...화면이 그려진 다음 가장 먼저 실행되야 할 코드 작성 공간

},[])

이 안에서, 화면이 그려진다음 실행시키고 싶은 함수를 작성한다면 가장먼저 실행이 된다.

 

3. state를 이용한 카테고리 기능 넣기

 

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

앱이 앱에 따라 모바일 맨 위 상태 바가 변하는 앱이 있다. 이부분도 우리가 처리를 할 수 있다.

 

5. 스택네비게이션 

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

컴포넌트를 페이지화 시키는 스택 네비게이션은 다음과 같다.
1) 우리가 페이지처럼 만든 컴포넌트를, 정말 페이지처럼 사용할 수 있게끔 페이지로 컴포넌트를 감싸 페이지로 만들어준다.
2) 이렇게 만든 여러 페이지들을 책갈피 기능을 하는 스택 네비게이터에 모조리 등록시켜서, 언제든지 이 페이지 이동이 가능하게끔 해준다.
3) 페이지는 Stack.Screen 이라 부르며, 책갈피는 Stack.Navigator라 부른다.

#페이지 이동하기

일단 페이지를 이동시키려면, 책갈피가 페이지들에게 부여해준 페이지 이동 기능을 사용해야 한다.
Stack.screen에 등록된 모든 페이지 컴포넌트들은 navigation 와 route 라는 딕셔너리(객체)를 속성으로 넘겨받아 사용할 수 있다.

데이터 없이 페이지 이동하기
navigation.navigate("DetailPage")

데이터 가지고 페이지 이동하기
navigation.navigate("Detail",{
  title: title
})

 

6. 페이지 내용 공유하기

Share : share 함수를 만들고 거기에 react-native가 기본적으로 제공해주는 Share 함수를 사용하여 간단히 공유를 할 수 있다.

import { Share } from "react-native";

const share = () => {
        Share.share({
            message:`${tip.title} \n\n ${tip.desc} \n\n ${tip.image}`,

 

7. 외부 링크 여는 방법

Linking

import * as Linking from 'expo-linking';

const link = () => {
        Linking.openURL("https://spartacodingclub.kr")

 

#숙제

어바웃 화면 페이지화 시키고, 버튼 추가하기.

Stacknavigator 사용해서 꿀팁찜 페이지 그려보기