두 개의 페이지를 확인했을 때 재 사용 가능한 컴포넌트 (반복적으로 사용하는 것)
- 타이틀 (회원가입 / 로그인)
- input box (이름, 이메일, 비밀번호 / 이메일, 비밀번호)
- 버튼 (회원가입 / 로그인 )
- 문구 (이미 가입했나요? / X)
컴포넌트를 생성 후 컴포넌트에 넘겨주는 props를 다르게 설정
<modal.js>
export default function Modal() {
return (
<div className="modal">
<Form type="signIn" title="로그인" inputData={SIGNIN_DATA} />
{/* <Form type="signUp" title="회원가입" inputData={SIGNUP_DATA} /> */}
</div>
);
}
//동적으로 만들려면 input 데이터의 개수만큼 넘겨주고 만들면 됨.
input에 대한 데이터를 함수로 넘겨주고 inputData에서 관리할 수 있게 함.
const SIGNIN_DATA = [
{
type: "email",
text: "이메일",
},
{
type: "password",
text: "비밀번호",
},
];
const SIGNUP_DATA = [
{
type: "name",
text: "이름",
},
{
type: "email",
text: "이메일",
},
{
type: "password",
text: "비밀번호",
},
];
<Form.js>
export default function Form({ type, title, inputData }) { //props 받아옴. console.log(type, title, inputData)
return (
<FormLayout>
<div className="form">
<h2>{title}</h2>
<div> //iNPUT 부분 : input데이터 받은 만큼 map을 돌려서 인풋데이터의 타입과 텍스트 적어줌.
{inputData.map((input, idx) => (
<Input key={idx} type={input.type} text={input.text} />
))}
</div>
<Button value={title} /> // BUTTON 부분
{type === "signUp" && ( // 멘트 부분 : 조건부 렌더링
<p className="isAlreadyLogin">
이미 가입하셨나요? <span className="linkBtn">로그인</span>
</p>
)}
</div>
</FormLayout>
);
}
위에서 레이아웃 부분과 로고 부분은 변동사항이 없음, 로그인, 회원가입 둘 다 쓰이고 같은 자리에 위치 -> 재사용 가능
function FormLayout(props) {
return (
<div className="formLayout">
<header>
<div className="logo" />
</header>
{props.children} // 이 안에 바뀐 값들이 들어가는 것.
</div>
보통은 props 넘겨줄 때 아래와 같이 컴포넌트 옆에 속성값 넣어줌
<Form type="signUp" title="회원가입" inputData={SIGNUP_DATA} />
그러나 children은 사이에 태그들을 넣어줌. 그게 props.children임
<FormLayout>
</FormLayout>