React-native에서 전역변수 사용하기

props를 사용하여 어떠한 값을 전달하는 과정에서 많은 컴포넌트를 거칠 수 있는데 중간에 사용이 되지않고 전달만 되는 컴포넌트 들이 보이는데 이런 것을 prop drilling이라고 한다.

3~4개 컴포넌트 사이에서 prop drilling이 2~3번만 일어나도 state관리가 지저분한 상태가 된다. 추가로 불필요한 re-rendering으로 인해 성능상의 이슈도 많이 발생시킨다.

따라서 props로 전역변수를 사용하기에는 무리가 있다.

그럼 어떻게 State를 깔끔하게 관리할 수 있을까?

정답은 Context와 Hooks를 사용하는 것이다.

Context는 명시적으로 props를 통하지 않고 컴포넌트간 데이터 공유 방법을 제공함

Hooks는 functional 컴포넌트에 State를 추가할 수 있게 해줌

global state/function을 update하기 위해 Context object에 저장을 하고, global settings를 update하기 위해 Hooks object에 저장을 한다.

그럼 이제 사용법에 대해 알아보자.

1. 가장 먼저 context를 hold할 컴포넌트를 만든다.

   // components/AppContext.js
   import React from "react";
   
   const AppContext = React.createContext();
   
   export default AppContext;

2. Global variables를 선언한다.

   // App.js
   import React, { useState } from 'react';
   import AppContext from './components/AppContext';
   
   export const App = () => {
     // Define as many global variables as your app needs, and hooks 
     // to set the state of the variable.
   
     const [setting1value, setSetting1value] = useState('initialValue1');
     const [setting2value, setSetting2value] = useState(false);

Global variables와 그 상태를 update할 Hooks는 컴포넌트 트리의 가장 최상위인 App.js에 선언한다.

3. Global variables를 update할 functions를 선언한다.

   // App.js continued
   // For each global variable, define a function for updating it.
   // In the case of setting1value, we’ll just use setSetting1value.
   // If we want to toggle setting2value, we can create a function to do so...
   
   const toggleSetting2 = () => {
     setting3 ? setSetting2(true) : setSetting2value(false);
   };

4. Object를 생성한다.

   // App.js continued
   const userSettings = {
     setting1name: setting1value,
     setting2name: setting2value,
     setSetting1value,
     toggleSetting2,
   };

Global variables와 그것들을 update하기 위한 functions를 hold할 object를 생성한다.

5. App을 context provider로 감싼다.

   // App.js continued
   return (
     <AppContext.Provider value={userSettings}>
       {/* All other components are wrapped by the AppContext.Provider */}
     </AppContext.Provider>
   );

'AppContext.Provider'로 App의 모든 컴포넌트를 감싸고 value로 'userSettings' object를 props로써 넘겨준다.

6. context에 접근하여 전역 변수 사용하기.

   // components/MyComponent.js
   import { useContext } from 'react';
   import AppContext from './AppContext';
   
   export const myComponent = () => {
     // Get the global variables & functions via context
     const myContext = useContext(AppContext);

7. context에 접근하여 전역 변수 사용하기.

   import React, { useContext } from "react";
   import { TextInput } from "react-native";
   import AppContext from "./AppContext";
   
   export const MyTextInput = () => {
     // Get the global variables & functions via context
     const myContext = useContext(AppContext);
   
     return (
       <TextInput
         value={myContext.setting1value}
         onChangeText={myContext.setSetting1value}
       />
     );
   };

자식 컴포넌트는 context에서 전달된 함수를 사용하여 global context를 update할 수 있다.