[React-Native] 언어, OS마다 렌더링 순서 변경

아무도 없는 회사... 배고프다..

🔧 개요

이번에 Task로 소셜 로그인 UI개선 업무를 맡았다. 내용으로는

1. 언어별로 버튼 순서 다르게 보여야 함
2. os별로 버튼 순서 다르게 보여야 함
3. 주어진 소셜 로그인은 구글,라인,애플,카카오톡,이메일,페이스북

인데 뭐 쉽겠지 라는 생각을 갖고 키보드에 손을 올리는 순간 선채로 죽어버렸ㄷ..

일단 왜 굳이 변경을 하냐라고 생각할 수 있지만 애플은 진짜 왜 그러는지 모르겠지만 ios 환경에서 자기들 로그인이 보이지 않으면 심사가 안될 수도 있다.

AOS에서 구글은 안 그러는 이런 건 애플 정말 별로다...

추가로 국가별로 그 언어를 쓰는 사람들이 주로 사용하는 소셜 로그인이 정말 확연하게 차이가 났다.
예를 들어 라인 로그인이 없이 일본앱에 출시하게 된다면 정말 가입율이 떨어지는 걸 확인할 수 있다. 각 나라마다 정말 확연한 차이를 보여줬다. 일본은 라인 로그인이 필수적으로 화면의 위쪽에 보여야 하고 한국은 카카오톡, 미국은 구글/애플 로그인이 주된 소셜 로그인 방법이었다.

하지만 추후에 회사에서 중국 쪽 진출을 위해 코드 수정이 용이하게 로직을 작성하고 싶은 마음이 이번 Task에선 좀 컸다.

🔧 내가 작성한 코드

아무래도 나중에 추가하기 위해서 좀 유연하게 작성을 할 필요가 있었다. 내가 원하기도 했고.
나에게만큼은 쉽지 않은 일이었지만 아래와 같이 작성해 봤다.

export default function App() {
  const PROVIDERS = {
    ko: {
      ios: [
        ["kakao", "apple", "google", "email"],
        ["facebook", "line"]
      ],
      aos: [
        ["kakao", "google", "email"],
        ["facebook", "apple", "line"]
      ]
    },
    en: {
      ios: [
        ["google", "apple", "facebook", "email"],
        ["line", "kakao"]
      ],
      aos: [
        ["google", "facebook", "apple", "email"],
        ["line", "kakao"]
      ]
    },
    ja: {
      ios: [
        ["line", "apple", "google", "email"],
        ["facebook", "kakao"]
      ],
      aos: [
        ["line", "google", "email"],
        ["facebook", "apple", "kakao"]
      ]
    }
  };

  const TEST = {
    google: "google",
    line: "line",
    kakao: "kakao",
    email: "email",
    apple: "apple",
    facebook: "facebook"
  };

  const SIGN_IN_METHOD = {
  'google': (
    <React.Fragment key='google'>
      <SignInWithGoogle />
      <VerticalSpacer size={8} />
    </React.Fragment>
  ),
  'line': (
    <React.Fragment key='line'>
      <SignInWithLine />
      <VerticalSpacer size={8} />
    </React.Fragment>
  ),
  'kakao': (
    <React.Fragment key='kakao'>
      <SignInWithKakao />
      <VerticalSpacer size={8} />
    </React.Fragment>
  ),
  'email': (
    <React.Fragment key='email'>
      <SignInWithEmailLargeButton />
      <VerticalSpacer size={8} />
    </React.Fragment>
  ),
  'apple': (
    <React.Fragment key='apple'>
      <SignInWithApple/>
      <VerticalSpacer size={8} />
    </React.Fragment>
  ),
  'appleForAos': (
    <React.Fragment key='appleForAos'>
      <SignInWithAppleForAndroid/>
      <VerticalSpacer size={8} />
    </React.Fragment>
  ),
  'facebook': (
    <React.Fragment key='facebook'>
      <SignInWithFacebook
      />
      <VerticalSpacer size={8} />
    </React.Fragment>
  )
};
  
  let result;
  if (language === "ko") {
    if (platform === "ios") {
      result = PROVIDERS.ko.ios;
    } else {
      result = PROVIDERS.ko.aos;
    }
  }

  if (language === "en") {
    if (platform === "aos") {
      result = PROVIDERS.en.aos;
    } else {
      result = PROVIDERS.en.ios;
    }
  }
  if (language === "ja") {
    if (platform === "aos") {
      result = PROVIDERS.en.aos;
    } else {
      result = PROVIDERS.en.ios;
    }
  }

  return (
    <div className="App">
      <ul>
        {result[0].map((provider) => (
          <li>{SIGN_IN_METHOD[provider]}</li>
        ))}
      </ul>
      <ul>
        {result[1].map((provider) => (
          <li>{SIGN_IN_METHOD[provider]}</li>
        ))}
      </ul>
    </div>
  );
}

참고) 배열이 2개인 이유는 메인화면(1순위)과 모달창(2순위) 두 개에 들어가기 때문에 그렇다.

1. PROVIDERS로 각 나라와 OS별로 들어가야 하는 버튼 순서대로 작성한다.
2. SIGN_IN_METHOD를 객체로 string key값을 받아서 컴포넌트를 value에 적어준다.
3. key값을 string으로 작성한 이유는 PROVIDERS에 적어놓은 배열 요소값과 비교하기 위함
4. 각 조건 별로 다르게 배열이 들어갈 빈 변수인 result값을 만들어놓는다.
5. if문에서 langauge로 체킹하고 platform으로 ios인지 aos인지 체킹을 한다.
6. 각 값에 맞는 값들을 가져온 result 배열을 map으로 돌려준다.
7. map을 돌리면서 위에 조건에 맞게 걸러진 값들을 provider로 받아서 SIGN_IN_METHOD의 key값으로 보여준다.

아주 잘 나온다.