[RN] 데이터 효과적으로 넘기고 받아오기 - 상태 관리 라이브러리 or param전송(feat. props와 param용어 혼동)

 
제목에도 적었다 시피
이 글에서는
props와 param의 차이를 혼동해서 생긴 문제와 
 
또, param으로 데이터 넘기는 경우와 상태관리를 사용하는 경우
뭐 그런 것들의 차이를 다룰 것이다.
 
물론 아주 초보자 적인 실수라고 생각이 들지만
초보자 맞다.ㅋ
 
그리고 내가 지금 이 글에서 
맞다고 적어놓은 글이 
또 나중에 보면 잘 못 적어둔 정보가 있을 까 두렵지만 ㅎㅎ
그래도 일단 기록해둔다.
 
 

 
위의 사진은 최근 프로젝트를 진행하며
props drilling 라는 문제 그리고 상태관리 관련해서 글을 쓸 때에
내가 어떤 부분에서 props drilling문제를 발견했는지에 대해
기재한 부분이다.
 
그런데 다시 생각해보니,
저건 props 전송이 아닌, param전송의 코드이다.
 
props와 params
난 둘이 비슷한 메커니즘으로 
작동 되는 줄 알았다.
 
둘 다 데이터를 전송할 때에 불필요한 화면에도 그 데이터를 똑같이
넘겨주어야 하는 줄 알았고,
상위-하위 관계가 있는 줄 알았다.
그래서 params전송에서도 drilling문제가 발생되는 줄 알았고
 
하지만 두 개의 용어에는 확실한 차이가 있었고,
내가 잘못 알고있었던 부분이 있었다.
 
 

props전송이란?

 
: 상위 구성 요소에서 하위 구성 요소로 데이터를 전달하는 데 사용된다.
 

// ParentComponent.js
import React from 'react';
import ChildComponent from './ChildComponent';

const ParentComponent = () => {
  const dataToPass = 'Hello from parent';
  
  return <ChildComponent propData={dataToPass} />;
};

export default ParentComponent;

// ChildComponent.js
import React from 'react';
import { Text } from 'react-native';

const ChildComponent = ({ propData }) => {
  return <Text>{propData}</Text>;
};

export default ChildComponent;

 

매개변수 전송(React Navigation)

 
: 서로 다른 화면이나 구성 요소 간에 데이터를 전달할 수 있다.
 
: React Navigation을 사용하여 화면 간을 탐색할 때 한 화면에서 다른 화면으로 데이터를 전달할 수 있다.
 
: 매개변수는 탐색 컨텍스트에만 적용되며 상위-하위 관계로 제한되지 않는다.
구성 요소 계층 구조에서 직접적인 상위-하위 관계가 없을 수 있는 화면 간의 통신을 가능하게 한다.
 

// ScreenA.js
import React from 'react';
import { Button } from 'react-native';

const ScreenA = ({ navigation }) => {
  const dataToPass = 'Hello from Screen A';

  return (
    <Button
      title="Go to Screen B"
      onPress={() => {
        navigation.navigate('ScreenB', { paramData: dataToPass });
      }}
    />
  );
};

export default ScreenA;

// ScreenB.js
import React from 'react';
import { Text } from 'react-native';

const ScreenB = ({ route }) => {
  const paramData = route.params.paramData;

  return <Text>{paramData}</Text>;
};

export default ScreenB;

 
여기서 중요한 것은 
React Navigation에서는 매개변수(params)를 보낼 때 
중간 화면을 거치지 않고 다른 화면으로 직접 전달할 수 있는 매커니즘이라는 것이다.
 
 
그런데 문득 든 생각..
 

그럼 중간 컴포넌트를 거칠 필요 없는 param으로 필요한 데이터를 다 전달하면 되는 것 아닌가?
상태관리는 그럼 왜 필요하지?

 
다시 한번 말하지만
정말 초보자 적인 생각일지 몰라도
초보자 맞다 ㅎㅎ
 
그래서 또 한 번 param전송이 아닌, 상태관리가 필요한 이유에 대해 찾았다.
 
1. 전역 상태 : 상태관리 라이브러리를 사용하면 어플리케이션 전역에서 
액세스 하고 수정할 수 있는 전역 애플리케이션 상태를 유지할 수 있다.
params는 일반적으로 네비게이션 스택 내에서 두 개의 특정 화면 간의 통신에 제한된다.
 
2. 복잡한 상태 : 많은 데이터 또는 복잡한 애플리케이션의 경우,
params만 사용하여 그 상태를 관리하면 지나치게 복잡한 코드가 될 수 있으며
상태 전환을 유지 및 이해하기 어렵게 만들 수 있다.
 
3. 반응성 : 상태 관리 라이브러리는 일반적으로 반응성을 관리하고 
상태가 변경될 때 구성 요소를 자동으로 업데이트하는 메커니즘을 제공한다. 
Params는 기본적으로 이러한 반응성 수준을 제공하지 않으며 
params의 변경에 대응하여 업데이트를 수동으로 처리해야 할 수 있다.
 
4. 결합성 분리  : 상태 관리 라이브러리는 데이터와 상태 관리를 
UI 구성 요소에서 분리함으로써 깨끗하고 유지보수하기 쉬운 코드를 유도한다.
 
5. 미들웨어 및 개선 기능: 많은 상태 관리 라이브러리는
비동기 작업, 로깅, 디버깅 도구 등과 같은 기능을 추가하여
애플리케이션을 향상시킬 수 있는 미들웨어와 플러그인을 제공한다.
 
 
요약하면 React Navigation을 통한 params를 사용하여 
네비게이션 관련 데이터 및 간단한 사용 사례에 대한 데이터 전달은 잘 작동할 수 있지만,
 params만으로 복잡한 전역 상태 관리 필요성을 충족하지 못할 수 있다.
 
이것 또한 props전송 대신 상태관리 라이브러리를 사용해야 하는 이유와 비슷한 이유 인 듯 하다.
 
 

상태관리와 Param의 사용의 차이에 대한 결론 및 예시

 
즉, 상태관리는 시간이 지남에 따라 변경될 수 있는 데이터를 관리하고
애플리케이션의 여러 부분 간에 공유하고 업데이트 해야 하는 경우에 사용된다.
예를 들면, 사용자가 밝은 테마와 어두운 테마 간에 전환할 수 있게 하려고 할 때 !
 

// ThemeContext.js
import React, { createContext, useState, useContext } from 'react';

const ThemeContext = createContext();

export const useTheme = () => {
  return useContext(ThemeContext);
};

export const ThemeProvider = ({ children }) => {
  const [theme, setTheme] = useState('light');

  const toggleTheme = () => {
    setTheme((currentTheme) => (currentTheme === 'light' ? 'dark' : 'light'));
  };

  return (
    <ThemeContext.Provider value={{ theme, toggleTheme }}>
      {children}
    </ThemeContext.Provider>
  );
};

 
이 예제는 React의 context api를 사용하여 전역 테마 컨텍스트를 만들고,
'ThemeProvider'내에서 테마 상태관리를 한다.
앱 내의 컴포넌트는 useTheme 훅을 사용하여 테마 상태에 액세스 하고 
업데이트 할 수 있다. 이것이 전형적인 상태관리의 예이다.
 
 
그리고 파라미터로 데이터를 전달하는 것은
주로 네비게이션과 화면 간 통신과 관련이 있다.
특정 데이터를 한 화면에서 다른 화면으로 전송해야 하는 경우, 일반적으로 수신 화면을 구성 또는
사용자 정의 매개변수로 사용하는 경우 유용하다.
예를 들면, 사용자 데이터를 프로필 화면으로 전달할 때이다.
 

// ScreenA.js
import React from 'react';
import { Button } from 'react-native';

const ScreenA = ({ navigation }) => {
  const userData = {
    name: 'John Doe',
    email: 'john@example.com',
  };

  return (
    <Button
      title="프로필 보기"
      onPress={() => {
        navigation.navigate('Profile', { user: userData });
      }}
    />
  );
};

// ProfileScreen.js
import React from 'react';
import { Text } from 'react-native';

const ProfileScreen = ({ route }) => {
  const user = route.params.user;

  return (
    <Text>
      이름: {user.name}
      {'\n'}
      이메일: {user.email}
    </Text>
  );
};

 
이 예제는 ScreenA에서 ProfileScreen으로 이동할 때
userData객체를 파라미터로 전달한다.
ProfieScreen은 route.params객체에서 사용자 데이터에 액세스한다.
이것은 특정 화면의 동작 또는 콘텐츠를 구성하기 위해 파라미터로 데이터를 전달하는 예이다.
 

---

그럼 어떨 때 상태관리 라이브러리를 사용하고,
어떨 때 param전송을 사용해야 하는가? 이 부분에 대한 명확한 확신이 들지 않는다.
단순한 param전송이 필요할 때도 분명 존재 할 텐데..
 
 

파라미터를 사용해야 할 경우, 상태관리를 고려해야 할 경우

 
- 파라미터 전송 사용 시
 
: 네비게이션 중에 화면 간 데이터를 전송해야 하는 경우.

: 수신된 파라미터를 기반으로 화면의 동작을 구성하거나 사용자 정의하려는 경우.

: 전달되는 데이터가 일시적이며 네비게이션 작업에 특정한 경우.
 
- 상태관리를 고려하는 경우
 
: 앱의 전역 애플리케이션 상태를 관리해야 하는 경우(앱의 수명 주기 동안 지속됨).

; 복잡한 데이터 상호 작용 및 데이터 공유 요구 사항이 다양한 앱 부분에서 필요한 경우.

: 데이터가 앱 세션 간에 지속되어야 하는 경우(예: 사용자 인증 상태, 사용자 환경 설정, 캐시된 데이터).

: 데이터 캐싱, 지연 로딩 또는 데이터 변환과 같은 고급 기능이 필요한 경우.
 
 

---

많은 경우 두 가지 방법의 조합이 효과적일 수 있다.
 
코드를 작성할 때 
언제 그리고 어떻게 코드를 구현해야 효과적일지에 대해
판단을 잘 해야 겠다는 생각이 든다.
 
상태관리가 필요한 코드인지
단순히 데이터 넘김이 필요한 것인지..
 
이해했다고 생각하는 부분에서도
계속해서 몰랐던 부분이 생겨나는 것을 보아
기초 뼈대에 대해 
좀 더 탄탄하게 다질 필요성을 느꼈다.