[React] 회원가입과 로그인 서비스 구현 중 컴포넌트 재사용 (1)

 

 

React에서 가장 좋은 장점은 컴포넌트 기반이기 때문에 재사용이 가능하다는 점입니다!

이번에 회원가입 서비스를 구현한 후 로그인 서비스 구현을 할려고 하니 이미 회원가입에서 만든 페이지를 재사용할 수 있겠다는 생각을 했습니다.

 

<뭉치> 회원가입, 로그인 화면설계

형식이 비슷해서 컴포넌트 재사용을 잘 활용해준다면 편리하게 개발할 수 있을 것 같습니다.

 

1. 부모 컴포넌트 만들기 - signup.js, signin.js

우선 url에 따라 사용될 로그인 컴포넌트와 회원가입 컴포넌트를 만들어줍니다.

 

import React from 'react';
import AuthForm from './AuthForm';

const Signup = () => {
    return (
        <div>
            <AuthForm type='signup' />
        </div>
    );
};

export default Signup;

 

import React from 'react';
import AuthForm from './AuthForm';

const Signin = () => {
    return (
        <div>
            <AuthForm type='signin' />
        </div>
    );
};

export default Signin;

여기에서 <AuthForm type=' ' />이 중요합니다.

type에 들어갈 것이 무엇인지에 따라 회원가입 페이지처럼 보여줄지 로그인 페이지처럼 보여줄지 결정할 것이기 때문입니다.

 

 

2. 자식 컴포넌트 만들기 - AuthForm.js

import axios from 'axios';
import React, { useEffect, useState } from 'react';
import './Sign.css'

const AuthForm = ({type}) => {
    console.log(type)
    ...
    return (
        <div>
            <div>
                <h3>
                    {type === 'signup' ? '회원가입' : '로그인'}
                </h3>
                
            </div>
            <div className='inputList'>
                <input value={user.email} onChange={onChange} name='email' type="eamil" placeholder='이메일'></input>
                <input value={user.password} onChange={onChange} name='password' type="password" placeholder='비밀번호'></input>
                {type === 'signup' && 
                    <input value={user.passwordCheck} onChange={onChange} name='passwordCheck' type="password" placeholder='비밀번호 확인'></input>
                }
                {!isPassword && <span>비밀번호를 다시 입력해주세요</span>}
                
                <button onClick={onClick} disabled={!(user.email && user.password && isPassword)}>가입하기</button>
            </div>
        </div>
    );
};

export default AuthForm;

전체 코드는 이렇지만 자세하게 설명하기 위해서 부분별로 나누도록 하겠습니다.

 

2-1) 부모 컴포넌트로부터 데이터 받기

const AuthForm = ({type}) => {
    console.log(type)
};

1번에서 signup에서 type='signin'으로 자식 컴포넌트에서 데이터를 보냈습니다.

그렇다면 console.log에는 무엇이 찍힐까요?

 

signin이 잘찍히네요.

반대로 signup으로 들어갔다면 콘솔에 signup이 찍힐 겁니다.

 

2-2) 조건부 렌더링

 

조건부 렌더링을 통해 타이틀을 회원가입 혹은 로그인이 나오게 해보겠습니다.

 

<h3>
	{type === 'signup' ? '회원가입' : '로그인'}
</h3>

이처럼 type이 signup이라면 회원가입이 나오게, 아니라면 로그인이 나오게 해줬습니다.

 

 

 

이번에는 사용자들에게 입력값을 받는 input 창을 재사용해보도록 하겠습니다!

 

<div className='inputList'>
    // 로그인의 경우 이메일과 비밀번호 input 밖에 보이지 않음
    <input value={user.email} onChange={onChange} name='email' type="eamil" placeholder='이메일'></input>
    <input value={user.password} onChange={onChange} name='password' type="password" placeholder='비밀번호'></input>
	
    // 회원가입일 경우 비밀번호 확인 input이 추가
    {type === 'signup' && 
		<input value={user.passwordCheck} onChange={onChange} name='passwordCheck' type="password" placeholder='비밀번호 확인'></input>
	}
	...
                
</div>

공통적으로 사용하는 input은 2개입니다.

이메일과 비밀번호 input은 로그인과 회원가입 둘 다 필요하기 때문에 그대로 두고 회원가입일 때만 필요한 비밀번호 확인 input을 조건부 렌더링을 사용하여 추가해줍니다.

 

input에서 사용한 조건부 렌더링은 타이틀에서 사용한 조건부 렌더링과 다릅니다.

// 삼항연산자 패턴
{ isTrue ? 'yes!' : 'no!' }

// && 패턴
{ isTrue && 'yes!' }
{ isTrue ? 'yes!' : null } // 위와 같은 뜻

먼저 타이틀에서 사용한 것은 삼항연사자를 이용한 패턴입니다.

isTrue에서 True 값이 맞다면 yes라는 값이 보이고 아니라면 no라는 값이 나옵니다.

 

그에 비해 && 패턴은 (선행 조건) && (후행 조건)으로 앞에 있는 조건이 만족된다면 후행 조건이 반환됩니다.

그렇기 때문에 삼항연산자에서 아니라면 null이라는 값을 쓸때 && 패턴을 이용하는 것이 좋습니다.

 

 

짜잔 조건부 렌더링이 잘 되었다는 것을 알 수 있다.

다음에는 페이지 뿐만 아니라 서비스까지 재사용할 수 없는지 알아보도록 하겠습니다!