컴포넌트의 재사용

• 컴포넌트는 재사용 가능한 UI의 단의를 의미한다
  = 반복되어 사용되는 요소 변화되는 요소들이 있을 때, 변화하는 부분들이 있다고 하더라도 매번 다른 코드로 처리할 필요 없이 컴포넌트화 하여 사용할 수 있다

// before -> 두 개의 내용을 표현하기 위한 두 개의 컴포넌트
isMyID ? <ProfileMyID /> : <ProfileOtherID />

// after -> 두 개의 내용을 표현하기 위한 하나의 컴포넌트
const MY_ID = 'younuk'
const OTHER_ID = 'dohyun'

isMyID ? <Profile userID={MY_ID} /> : <Profile userID={OTHER_ID} />

Props를 통해 각각 달리 표시해주고 싶은 값들을 해당 컴포넌트에 넘겨주면 하나의 컴포넌트로 여러가지 형태로 사용할 수 있는 재사용성 높은 컴포넌트가 된다

// Modal.js
export default function Modal() {
  return (
    <div className="modal">
      <Form type="signUp" title="회원가입" inputData={signUpData} />
    </div>
  );
}

const signUpData = [
  {
    type: "name",
    text: "이름",
  },
  {
    type: "email",
    text: "이메일",
  },
  {
    type: "password",
    text: "비밀번호",
  },
]

// Form.js
import FormLayout from "./FormLayout";
import Input from "./Input";
import Button from "./Button";

// 일부 생략된 코드가 있습니다!
export default function Form({ type, title, inputData }) {

  return (
    <FormLayout>
      <h2>{title}</h2> //모달 창의 타이틀과 버튼에 출력될 텍스트
      <div>
        {inputData.map((input, index) => (
          <Input
            key={index}
            type={input.type} input 태그의 type이 password인지를 체크
            placeholder={input.text} //input 태그의 placeholder에 출력될 텍스트
          />
        ))}
      </div>
      <Button value={title} />
      //signUp인지 signIn인지를 구분하기 위한 값 + 회원가입일 경우 "이미 가입하셨나요?"를 출력함
      {type === "signUp" && (
        <p className="isAlreadyLogin">
          이미 가입하셨나요? <span>로그인</span>
        </p>
      )}
    </FormLayout>
  );
}

Modal.js의 signUpProps는

의 props로 전달되면서 컴포넌트 안쪽으로 전달되고 있는 값입니다. 코드로 확인할 수 있다시피 하위 컴포넌트에서는 상위 컴포넌트에서 전달해주는 값에 따라 다른 데이터를 출력하게 됩니다.

children

import React from "react";

function FormLayout({ children }) {
  return (
    <div className="form">
      <header>
        <div className="logo" />
      </header>
      {children} // 컴포넌트로 감싸진 부분이 이곳에 들어옵니다!
    </div>
  );
}

export default FormLayout

// Form.js
<FormLayout>...</FormLayout>

로그인 / 회원가입 양쪽에서 모두 쓰이고 같은 자리에 위치하고 있는 컴포넌트 부분을 children을 사용해 간단히 코드를 구성할 수 있다