[JUSTCODE] Advanced Foundation - React 재사용 컴포넌트

컴포넌트

UI 중 비슷한 구조를 가진 것들을 하나로 묶어서 분리하는 것을 말한다.

 

장점

1. 유지보수가 쉽다.
2. 명시적이다.
3. 재사용성이 좋다.

사용방법

1. 화면을 보고 구조가 비슷하거나 같은 묶음을 확인한다.
2. 각 요소에 내려줄 prop의 구조를 확인한다. (prop로 자식 컴포넌트에 내려줄 때는 자식 컴포넌트 파일을 import한다.)
3. mock 데이터를 만들어서 가져온다. or back-end와 통신하여 데이터를 db에서 가져온다.
4. css 파일도 각자 컴포넌트에 맞게 분리한다.

ex)

부모 컴포넌트

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

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

signUpProps는 <Form />의 props로 전달되어 자식 컴포넌트에서 데이터를 받아올 수 있다.

 

자식 컴포넌트

// Form.js
import FormLayout from "./FormLayout"

// 일부 생략된 코드가 있습니다!
function Form(props) {
  const { type, title, inputData } = props;
  return (
    <FormLayout>
      <h2>{title}회원가입</h2>
			<div />
      <div>
        {inputData.map((input) => (
          <Input
            key={input.id}
            type={input.type}
            text={input.text}
          />
        ))}
      </div>
      <Button value={title} />
      {type === "signUp" && (
        <p className="isAlreadyLogin">
          이미 가입하셨나요? <span>로그인</span>
        </p>
      )}
    </FormLayout>
  );
}