[Udemy] React Native - The Practical Guide [2021 Edition]

강좌를 직접 구매하여 공부를 하고 기록을 한 곳입니다.

내 레파지토리 주소 : github.com/junghyeonsu/react-native-practical-guide

 유데미 강좌 주소 : www.udemy.com/course/react-native-th\e-practical-guide/

---

2020/12/29 (section1. 1강 ~ section1. 12강)

아래 번호는 강의 번호가 아닌, 배운 것들을 기록하고 보기 좋게 번호를 매긴 것

 

1. 강사 소개

 

2. react native가 무엇인지

 

3. react 설명

 

4. react native 작동 방식

 

5. 리액트 네이티브 코드가 어떻게 돌아가는가,

 

6. Expo CLI(Third-party service) VS React Native CLI

요기서는 Expo로 실습을 한다.

 

7. expo-cli 설치

 

8. 첫 프로젝트 생성

컴퓨터에서 실행한 모습

 

휴대폰에서 실행한 모습

9. Text, View 리액트 구성요소와 비슷하고

리액트 16.8 버전 이전에는 state를 사용하려면 class component를 사용해야 했지만

16.8 버전 이후로는 hooks를 사용해서 function component 로 사용 가능

 

10. 리액트 네이티브가 어려운 이유

•  크로스 플랫폼 스타일링이 되는 컴포넌트가 적다
  = 혼자서 스타일링을 하거나, 서드파티 라이브러리를 사용해서 해결 가느
• 기본적인 컴포넌트밖에 제공을 하지 않는다.
  = 1번과 같이 해결
• 반응형 box는 없다.
  = device를 체크하면서 반응형 디자인을 만들어야 한다.
• 리액트 네이티브는 급변하고 있다. (지금도)

---

2020/12/30 (section1.13강~ section2. 26강)

1. 안드로이드 스튜디오 설치

2.  코스 개요

 

3. Core Components

 

4. 두번째 프로젝트 생성

 

5. View의 사용법

View 태그를 중첩사용해서 레이아웃을 구성하는 방식을 많이 사용한다.

 

6. TextInput, Button Tag

 

7. Inline styling

 

8. layout styling (css랑 비슷)

 

justifyContent : 주축을 기준으로

만약 주축이 row라면 왼쪽,오른쪽으로 배치를 결정하는 것

column이라면 위쪽 아래쪽 배치를 결정하는 것

 

alignItems : 주축의 cross 축을 기준으로 자식 노드들의 배치를 결정

만약 주축이 row라면 자식들의 위쪽 아래쪽의 배치를 결정하는 것

column이 주축이라면 row가 cross line이 되니, 왼쪽 오른쪽이 어떻게 배치될 건지 결정

 

9. flex box에 대해서 자세히

기본적으로 View tag는 flex box의 형식을 따른다.

웹은 가로축을 기본축으로 삼지만, React Native에서는 세로축을 기본축으로 삼는다.

 

10. StyleSheet styling

inline styling은 비추천한다. 코드의 가독성이 떨어지고 재사용성도 떨어짐

---

2020/12/31 (section2. 27강 ~ section2. 34강)

1. arrow function, useState를 사용한 상태 관리

 

2. javascript map 문법을 이용한 배열 출력

- key

 

3. list stylijng

- marginVertical : 위 아래 margin을 적용함, 좌 우는 X

 

4. ScrollView

- 아이템이 많아 질 가능성이 있는 화면은 최상단 컴포넌트를 ScrollView로 설정해두는 것이 좋다.

 

5. FlatList

- ScrollView 보다 더 좋은 사용자보기를 제공한다.

- 아이템이 화면을 넘어갈 때만 리스트 뷰를 제공

 

6. 컴포넌트 분리, state 전달, 함수 전달

- 함수는 arrow function으로 함수를 할당 가능 혹은 bind 메소드 사용

 

7. Touchable, TouchableOpacity

- touchable 컴포넌트는 자리를 차지하지 않는다, 하지만 자식 요소들이 터치가 가능해짐

- opacity 컴포넌트는 터치를 했을 때 투명도가 바뀌어서 터치를 했는지 알 수 있게함

- 그리고 트리거들 중에 onTouchEnd 같은 것들은 터치가 얼마나 이루어졌는지 시간을

확인하는 그런 메소드들도 있다.

 

FlatList

---

2021/1/1 (section2. 35강 ~ section2. 41강)

1. remove array

- 자바스크립트 filter 메소드 사용

- filter는 거른다 라는 느낌, 함수안에서 배열을 한 바퀴 도는데

false가 뜨면 그 오브젝트는 걸러버림 이를 활용해 remove 메소드 구현

 

2. modal react native component

- Modal 컴포넌트는 visible 옵션이 있다.

- animationType 이라는 멋진 옵션이 있음

 

3. 

 

 입력화면과 목록화면

 

- flex box에 대한 개념들

- state, function 자식 컴포넌트에 넘기는 법

- Modal, Button, FlatList 등등 React Native 내부 컴포넌트들을 배움

---

2021/1/2 (section3. 42강 ~ section4. 56강 )

1. 디버그 하는 법

- 에러 메세지 / 앱이 crush 됐을 때

- 스타일링 에러 ( UI / UX )

- Logical 에러

- 에러 메세지를 자세하게 보자

- console.log를 잘 이용하자

- 크롬 디버거를 사용하자

 

2. react native debuger 사용하기

 

3. Section 4에서 배울 것들

- 커스텀 스타일링 컴포넌트

- 스타일링과 레이아웃에 대해서 조금 더 깊게 ( flexbox )

 

4. rn-number-game 생성

 

rn-number-game 생성

 

---

2021/1/3 (section4. 57강 ~ section4. 67강 )

1.  shadow property는 ios에서만 작동한다.

- 안드로이드는 elevation property를 사용하자

 

2. 컴포넌트 분리

 

<View style={{...styles.card, ...props.style}}>{props.children}</View>

card컴포넌트를 생성해서 재사용하고 싶은데, 몇몇 프로퍼티들은 재사용하고

나머지는 사용자로부터 입력받고 싶을 때 사용하는 문법

...styles.card는 기존에 있던 스타일들을 복사하고, props.style은 이 컴포넌트로 넘어오는

스타일들을 합쳐서 card 컴포넌트의 style로 지정하겠다는 뜻

 

3. 상수 저장하는 법

 

4. API같은 것들은 공식 홈페이지를 참고하자.

 

5. 재사용하려는 컴포넌트에 { ...props } 라는 속성을 넣으면

사용하고자 하는 위치에서 스타일을 추가했을 때, 그 스타일이 우선시된다.

원래 있던 재사용가능한 컴포넌트는 width가 50인데,

내가 사용하고자 하는 곳에서는 30으로 설정하고 싶으면 { ...props }를 설정해주면 된다.

 

6. Input 컴포넌트에 대한 유용한 속성들

keyboardType="number-pad" = 입력할 때 숫자패드로 보여줌 

maxLength={2} = 최대로 입력할 수 있는 길이

등등 reactnative.dev/docs/textinput 홈페이지에서 확인 가능

 

7. Input을 입력하다가 다른 화면을 클릭해서 키보드를 없애고 싶을 때

- 전체 화면에 TouchableWithoutFeedback 컴포넌트 import

- Keyboard 컴포넌트 import

- TouchableWithoutFeedback onPress 시, Keyboard.dismiss() 함수 실행

 

8. Alert 컴포넌트 사용

 

---

2021/1/5 (section4. 68강 ~ )

1. useRef 사용

 

2. useEffect

- 렌더링 이후에 매번 실행되는 RN의 사이드 이펙트 Hooks 함수

 

3. 글꼴 추가하기

import * as Font from 'expo-font';

const fetchFonts = () => {
  Font.loadAsync({
    'open-sans' : require('./assets/fonts/OpenSans-Regular.ttf'),
    'open-sans-bold' : require('./assets/fonts/OpenSans-Bold.ttf')
  });
}

require 안에는 폰트의 경로를 나타낸다.

 

4. 데이터가 로딩될 때까지 기다리기

  const [dataLoaded, setDataLoaded] = useState(false);

  if (!dataLoaded) {
    return <AppLoading startAsync={fetchFonts} onFinish={() => setDataLoaded(true)} />;
  }

AppLoading 이라는 expo에서 제공하는 컴포넌트안에

startAsync 라는 특성을 이용해서, 위에 생성해놓은 fetchFonts를 call하면

fetchFonts가 전부 수행될 때까지 로딩중을 띄운다.

 

그리고 모두 끝나면 onFinish 함수를 실행시키는 방식

 

5. 모든 컴포넌트에 똑같은 글꼴 적용하는 방법

- 일일이 스타일에다가 fontFamily로 적어주면 코드가 너무 길어지니

Text 컴포넌트 (이름은 아무거나 상관없음) 생성한 다음 그 컴포넌트를 재사용 하는 형식으로 해라

 

- 또는

constant 형식으로 파일을 저장하고 내보내는 방식도 있다.

 

6. Image 컴포넌트 사용

- source={require(경로)}

 

아래서부터는 Github commit으로 이력을 남김

 

github.com/junghyeonsu/react-native-practical-guide/commits/master

junghyeonsu/react-native-practical-guide

---