처음 배우는 리액트 네이티브 : 7~8장 정리

7장 Context API

---

Context API : 데이터를 전역적으로 관리하고 사용할 수 있도록 하는 기능. 스타일드 컴포넌트가 대표적인 예시이다.

Context API를 이용한 전역 상태 관리

일반적으로 리액트 네이티브에서는 데이터는 부모 컴포넌트에서 자식 컴포넌트로 전달된다. 데이터를 사용하는 컴포넌트가 많다면 최상위 컴포넌트(App)에서 상태를 관리하여야 한다. 그러나 이런 방법은 관리하는 상태가 추가되거나 변경되는 경우 과정에 속한 모든 컴포넌트를 찾아서 수정해야 하기 때문에 개발 단계뿐 아니라 유지보수에도 매우 불편하다. Context API를 이용하여 Context를 생성하면 중간 과정의 컴포넌트들을 거치지 않고 데이터를 바로 받아올 수 있다.

cosnt Context = createContext(defaultValue);

Context 오브젝트는 입력된 기본값 외에 Consumer, Provider 컴포넌트를 가지고 있다.

(1) Consumer

Context의 내용을 읽고 사용하는 컴포넌트이다. 상위 컴포넌트 중 가장 가까운 곳에 있는 Provider 컴포넌트가 전달하는 데이터를 이용한다. 만약 Provider 컴포넌트가 없다면 createContext()의 파라미터로 전달된 기본값을 사용한다.

(2) Provider

하위 컴포넌트에 Context의 변화를 알리는 역할을 한다. value를 받아서 모든 하위 컴포넌트에 전달하고, 하위 컴포넌트는 이 값이 변경될 때마다 다시 렌더링된다.

useContext

Consumer 컴포넌트의 자식 함수로 전달되던 값과 동일한 데이터를 반환하는 Hook이다. Consumer 컴포넌트를 사용하지 않고 Context의 내용을 사용할 수 있게 한다.

 

 

8장 내비게이션

---

리액트 네이티브에서는 React Navigation 라이브러리를 사용해 다양한 화면을 상황에 맞게 전환하는 내비게이션 기능을 구현할 수 있다.

리액트 내비게이션에서 지원하는 내비게이션 종류

• 스택 내비게이션
• 탭 내비게이션
• 드로어 내비게이션내비게이션의 구조리액트 내비게이션에는 NavigationContainer, Navigator, Screen 세 가지 컴포넌트가 있다.
• NavigationContainer : 내비게이션의 계층 구조와 상태를 관리하는 컨테이너 역할을 한다. 모든 내비게이션 구성 요소를 감싼 최상위 컴포넌트여야 한다.
• Navigator : 화면을 관리하는 중간 관리자 역할로 내비게이션을 구성한다. 여러 개의 Screen 컴포넌트를 자식 컴포넌트로 갖고 있다.
• Screen : 화면으로 사용되는 컴포넌트로 name(화면 이름), component(화면으로 사용될 컴포넌트를 전달) 속성을 지정해야 한다. 화면으로 사용되는 컴포넌트에는 항상 navigation과 route가 props로 전달된다.

설정 우선 순위

내비게이션에서 속성을 수정하기 위해서는 Navigator 컴포넌트, Screen 컴포넌트, props로 전달되는 navigation을 이용해서 수정하는 방법이 있다. Navigator 컴포넌트에서 속성을 지정하면 자식 컴포넌트로 존재하는 모든 컴포넌트에 적용된다. 또한 작은 범위의 설정일수록 우선순위가 높아진다.

스택 내비게이션

가장 기본적인 내비게이션으로, 현재 화면 위에 다른 화면을 쌓으면서 화면을 이동한다. 이름 그대로 스택과 같은 구조이다.

const StackNavigation = () => {
    return (
        <Stack.Navigator>
            <Stack.Screen name="Home" component={Home} />
            <Stack.Screen name="List" component={List} />
            <Stack.Screen name="Item" component={Item} />
        </Stack.Navigator>
    );
};

탭 내비게이션

보통 화면 위나 아래에 위치하며, 탭 버튼을 누르면 버튼과 연결된 화면으로 이동하는 방식으로 동작한다. 스택 내비게이션과 마찬가지로 Navigator 컴포넌트, Screen 컴포넌트가 존재한다.

 

 

그 외 메뉴를 감춰서 공간을 절약하는 드로어 내비게이션도 있다!