[React] 컴포넌트 재사용

컴포넌트의 재사용

1차 프로젝트를 진행하며 로그인페이지를 맡게 되었는데
같이 맡게 된 회원가입 페이지와 레이아웃 및 기능이 비슷하여
<User /> 라는 컴포넌트를 만들어 재사용하게 되었습니다.

로그인, 회원가입 페이지의 기본 구조

• 타이틀
• (회원가입) 이름
• 이메일
• 패스워드
• (회원가입) 휴대폰 번호
• (로그인/회원가입)버튼

<div className="user">
  <h1 className="userTitle">{title}</h1>
  <form className="form" onSubmit={handleFormSubmit}>
    {title === '회원가입' && <input type="text" name="userName" />}
    <input type="text" name="email" />
    <input type="password" name="password" />
    {title === '회원가입' && <input type="text" name="phoneNum" />}
    <button>{title}</button>
  </form>
</div>

User 컴포넌트의 Props로 받는 데이터의 조건에 따라
추가적으로 이름과 휴대폰 번호를 입력받을 수 있는 <input /> 을 렌더링 해주면
하나의 컴포넌트로 비슷한 구조인 상황에서 로그인과 회원가입 페이지를 만들 수 있게 됩니다.

하위 컴포넌트의 재사용

작업을 진행하며 <input /> 태그의 경우