[0812~0813] React-Native 강의 정리

Section 13 : Data API Sync

useEffect

: 컴포넌트의 렌더링이 완료된 다음 원하는 작업을 수행시키는 기능.

(참고 : https://ko.reactjs.org/docs/hooks-reference.html#useeffect)

useEffect(() => {}, [])

- 첫 번째 매개변수 : 조건을 만족할 때마다 실행됨.

- 두 번째 매개변수 : 함수가 호출되는 조건을 설정.

→ 배열 안에 전달한 값이 변경될 때만 useEffect가 실행됨.

 

두 번째 매개변수에 아무것도 전달하지 않으면 렌더링 될 때마다 첫 번째 매개변수에 전달된 함수가 호출됨.
두 번째 매개변수에 '빈 배열'을 전달하면 useEffect는 단 한 번만 실행됨.

 

navigation.addListener()

: 스크린의 변화를 감지하여, 설정된 함수를 실행함.

 

- 첫 번째 매개변수 : 이벤트의 타입 (ex. 'focus', 'didFocus' 등...)

- 두 번째 매개변수 : 첫 번째 매개변수의 이벤트가 일어나면 실행될 콜백 함수.

→ 보통은 React.useEffect 를 사용하여 Listener를 추가하는 것이 일반적.

useEffect(() => {
        navigation.addListener('didFocus', () => {
            getPosts();
        });
    }, []);
//해당 화면이 'focus' 되었을 때 콜백 함수 실행.

---

Section 15 : In-App Authentication

React Navigation의 Navigator 종류

1. Stack Navigator : 화면 사이 전환 기능을 제공.
→ 새 화면이 가장 위에 올라가는 Stack 구조를 가짐.

2. Bottom Tab Navigator : 화면을 전환하기 위한 버튼들로 구성된 하단 탭 바를 제공.

3. Switch Navigator : 한 번에 오직 한 개의 화면을 보여주는 Navigator.

→ Stack이 쌓이지 않고 새로운 화면을 띄움.

→ 사용자가 로그인하지 않은 경우 회원가입이나 로그인 화면을, 로그인한 경우 앱의 컨텐츠를 보여주는 경우 등에 사용.

→ React Navigation V4 까지 지원되는 것 같음. (참고 : https://reactnavigation.org/docs/4.x/switch-navigator/)

4. Drawer Navigator : 제스처를 통해 열고 닫을 수 있는 메뉴를 만듦.

 

→ 화면의 구성에 따라 서로 다른 Navigator를 사용 & 조합

⇒ 상위의 Navigator + 다수의 Sub Navigator들의 조합으로 앱을 구성.

 

const switchNavigator = createSwitchNavigator({
//2개의 Sub Navigator의 구성
  flow1: createStackNavigator({
    First: FirstScreen,
    Second: SecondScreen, //nested한 구조라도 문제없이 key로 접근 가능.
  }),
  flow2: createBottomTabNavigator({
    Thrid: ThirdScreen,
    Fourth: FourthScreen,
    Fifth: FifthScreen,
  })
});

⇒ Switch Navigator는 화면이 한 번 전환되면 그 전 화면으로 다시 돌아갈 수 없음.

 

 

react-native-elements

: 미리 만들어진 + 스타일링이 적용된 Component들을 사용할 수 있는 라이브러리.

→ 커스텀이 가능한 버튼 등 다양한 컴포넌트들을 제공.

→ 기존 element들에 비해 다양한 prop들을 지원함.

(참고 : https://reactnativeelements.com/docs/)

 

→ 스타일을 일일이 지정하는 것보다, 'Helper' 역할을 수행할 컴포넌트를 만드는 것이 편리할 수 있음.

 

 

Header

→ 헤더를 없애는 것은 navigationOptions를 통해 가능.

//navigation을 받지 않고도 가능.
Screen.navigationOptions = () => {
    return {
        headerShown: false,
    }
};

※ secureTextEntry : TextInput(Input)에 입력한 값을 숨기는 기능(비밀번호 입력 시처럼)

→ true, false값으로 설정 가능.