앱개발 3주차 개발일지

1) 리액트 필수 지식 활용

  - 컴포넌트(Component)

  - 상태(State,useState)

  - 속성(Props)

   - useEffect

 

 

 

컴포넌트

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

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

 👉 컴포넌트는 즉, 화면의 모든 부분. 그리고 컴포넌트란 App.js의 큰 App 함수처럼, 코드 전체를 감싸고 있는 함수를 뜻하기도 함.

     따라서 App.js를 App 컴포넌트라고도 부를 수 있음 

 

 👉 버튼 하나가 컴포넌트가 될 수 있고, 버튼을 모아둔 영역이 컴포넌트가 될 수 있음. 이렇게 컴포넌트로 생각하고

      앱을 개발해 나아간다면, 코드 재사용이 용이 해집니다.

      코드 재사용이란 어려운 용어는 아니고, 버튼 하나를 만들었을 때 이 버튼 코드를 여러 페이지에서 사용 가능하다는 뜻

 

속성

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

<Text> 태그엔 numberOfLines이란 속성이 있었습니다. 말줌임표 효과를 주었죠! <Image> 태그엔 resizeMode란 속성이 있었습니다. 이미지가 영역을 차지하는 방식을 나타냈죠. 이 모든 속성들은 공식 문서에 나와 있고, 해당 엘리먼트들이 태어날 때부터 가지고 있는 속성이였습니다.

 

상태

컴포넌트마다 데이터를 보유하고 관리 할 수 있습니다. 데이터라고 불러도 되지만, 리액트에서는 컴포넌트에서 보유/관리 되는

데이타를 상태라 부름. 리액트에서 상태(state)는 리액트 라이브러리에서 제공해주는 useState로 생성하고 setState 함수로 정/변경 할 수 있음

useEffect

화면이 그려진다음 가장 먼저 실행되는 함수

데이터를 준비할 때 사용

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

예를 들어 이런 순서로.. 

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

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

 

2) Expo 기능 사용

앱 상태 바(Status Bar) 관리

3) 페이지 적용

스택네비게이션

앱에 페이지 개념을 입혀주고! 웹 사이트를 이용하듯, 앱에서 여러분들이 만든 컴포넌트들을 페이지화 시켜주고,

해당 페이지끼리 이동을 가능하게 해주는 라이브러리

 

컴포넌트를 페이지화 시키는 스택 네비게이션은 다음과 같습니다.

우리가 페이지처럼 만든 컴포넌트를, 정말 페이지처럼 사용할 수 있게끔 페이지로 컴포넌트를 감싸 페이지로 만들어줌.

이렇게 만든 여러 페이지들을 책갈피 기능을 하는 스택 네비게이터에 모조리 등록시켜서, 언제든지 이 페이지 이동이 가능하게끔 해줌

페이지는 Stack.Screen 이라 부르며 책갈피는 Stack.Navigator라 부릅니다

 

페이지 내용 공유

import { Share } from "react-native";