8.2.4 컴포넌트 분리하기

회원 인증 화면의 UI가 어느 정도 구현이 됐습니다. 지금 JSX 코드가 86줄 정도로 꽤 긴 편인데요. JSX 코드가 길어지면 코드를 봤을 때 화면의 구조가 한눈에 들어오지 않습니다. 따라서 코드가 길어질 경우 컴포넌트를 따로 분리하는 습관을 들이면 유지 보수 측면에서 도움이 됩니다.

SignInScreen에서 인풋들이 있는 SignForm과, 버튼들이 있는 SignButtons를 분리해보겠습니다.

components/SignForm.js

import React, {useRef} from 'react';
import BorderedInput from './BorderedInput';

function SignForm({isSignUp, onSubmit, form, createChangeTextHandler}) {
  const passwordRef = useRef();
  const confirmPasswordRef = useRef();

  return (
    <>
      <BorderedInput
        hasMarginBottom
        placeholder="이메일"
        value={form.email}
        onChangeText={createChangeTextHandler('email')}
        autoCapitalize="none"
        autoCorrect={false}
        autoCompleteType="email"
        keyboardType="email-address"
        returnKeyType="next"
        onSubmitEditing={() => passwordRef.current.focus()}
      />
      <BorderedInput
        placeholder="비밀번호"
        secureTextEntry
        hasMarginBottom={isSignUp}
        value={form.password}
        onChangeText={createChangeTextHandler('password')}
        ref={passwordRef}
        returnKeyType={isSignUp ? 'next' : 'done'}
        onSubmitEditing={() => {
          if (isSignUp) {
            confirmPasswordRef.current.focus();
          } else {
            onSubmit();
          }
        }}
      />
      {isSignUp && (
        <BorderedInput
          placeholder="비밀번호 확인"
          secureTextEntry
          value={form.confirmPassword}
          onChangeText={createChangeTextHandler('confirmPassword')}
          ref={confirmPasswordRef}
          returnKeyType="done"
          onSubmitEditing={onSubmit}
        />
      )}
    </>
  );
}

export default SignForm;