컴포넌트 쪼개기

컴포넌트를 여러 개의 작은 컴포넌트로 나누는 것을 두려워하지 말아야 한다.
다음 경우에는 별도의 컴포넌트로 만드는 게 좋다.

• UI 일부가 여러 번 사용되는 경우
• UI 일부가 자체적으로 복잡한 경우

props.children

리액트 컴포넌트는 props로 children이라는 걸 받는다. 이를 통해 일반 JavaScript 데이터(ex. number, string, ...) 뿐만 아니라 HTML 태그(ex. div, li, ...) 컴포넌트(JSX Element) 등 어떤 값이든 배열로 받아올 수 있다.
단, Object는 예외이다. 태그와 태그 사이의 자리에 Object 데이터가 들어오게 된다면 Uncaught Error: Objects are not valid as a React child 에러를 발생시킨다.

<Component></Component> 형태로 컴포넌트의 내용물을 살짝씩 바꿔서 재사용하고 싶을 때 children을 쓰면 된다.

// 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}
            placeholder={input.text}
          />
        ))}
      </div>
      <Button value={title} />
      {type === "signUp" && (
        <p className="isAlreadyLogin">
          이미 가입하셨나요? <span>로그인</span>
        </p>
      )}
    </FormLayout>
  );
}

// FormLayout.js
import React from "react";

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

export default FormLayout