TIL_컴포넌트 재사용 이해하기

이고운·2022년 8월 24일
0

1. watcha 회원가입/로그인페이지에 따라 달라지는 컴포넌트 재사용하기

1) 재사용 할 수 있는 컴포넌트 확인하기


두 개의 페이지를 확인했을 때 재 사용 가능한 컴포넌트 (반복적으로 사용하는 것)

  • 타이틀 (회원가입 / 로그인)
  • input box (이름, 이메일, 비밀번호 / 이메일, 비밀번호)
  • 버튼 (회원가입 / 로그인 )
  • 문구 (이미 가입했나요? / X)

2) 하위 컴포넌트로 내려줘야 할 데이터 구조 결정하기

컴포넌트를 생성 후 컴포넌트에 넘겨주는 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>
  );
}

2. props.children 적용하기

1) 변하지 않는 부분 찾기

위에서 레이아웃 부분과 로고 부분은 변동사항이 없음, 로그인, 회원가입 둘 다 쓰이고 같은 자리에 위치 -> 재사용 가능

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>
 



profile
자 이제 시작이야~ 내 꿈을~ 내 꿈을 위한 여행~~🌈

0개의 댓글