TIL.42 컴포넌트 재사용하기

출저

• React 공식문서
• 위코드 수업자료

다시 한번 더! 컴포넌트란?

• 재사용 가능한 UI 단위!!!
• 회원가입과 로그인페이지를 만들다보면 같은 input태그나 button태그를 약간씩만 바꿔서 거의 비슷하게 쓰는 경우가 있다.
  개발자란... 반복되는 코드는 그냥 못지나치지...
  컴포넌트란... 재사용 해야만 하지...
  하지만 attribute가 조금씩 달라지는걸? 완전히 같지 않은데 어떻게 재사용하지? 라는 궁금증을 단번에 날려버린 위코드의 세션이 있었으니...

말그대로 컴포넌트를 재사용 해보자

예시

// before -> 두 개의 내용을 표현하기 위한 두 개의 파일
isMyID ? <ProfileMyID /> : <ProfileOtherID />
// after -> 두 개의 내용을 표현하기 위한 하나의 파일
const MY_ID = '12345'
const OTHER_ID = '54321'
isMyID ? <Profile userID={MY_ID} /> : <Profile userID={OTHER_ID} />

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

• 위 세션 설명처럼 두개의 컴포넌트를 만드는 것 보다 변수를 할당하여 같은 컴포넌트 attribute에 다른 값을 부여해 줌으로서 약간 다른 같은 구조의 컴포넌트를 표현할 수 있다.

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

• 각 요소에 내려줄 prop 들의 구조를 결정한다.

// Modal.js
export default class Modal extends Component {
  render() {
    return (
      <div className="Modal">
	<Form format={signUpProps} />
      </div>
    );
  }
}

const signUpProps = {
  type: "signUp",
  text: "회원가입",
  data: [
    {
      type: "name",
      text: "이름",
    },
    {
      type: "email",
      text: "이메일",
    },
    {
      type: "password",
      text: "비밀번호",
    },
  ],
};

// Form.js
export default class Form extends Component {
  render() {
		const { format } = this.props;

    return (
      <FormLayout>
        <h2>{format.text}</h2>
        <div>
          {format.data.map((input, idx) => (
            <Input key={idx} type={input.type} text={input.text} />
          ))}
        </div>
        <Button value={format.text} />
        {format.type === "signUp" && (
          <p className="isAlreadyLogin">
            이미 가입하셨나요? <span>로그인</span>
          </p>
        )}
      </FormLayout>
    );
  }
}

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

• type : signUp인지 signIn인지를 구분하기 위한 값 + 회원가입일 경우 "이미 가입하셨나요?"를 출력
• text: 모달 창의 타이틀과 버튼에 출력될 텍스트
• data: Input 컴포넌트를 그려내기 위해 필요한 정보를 담고 있는 배열
  • type: input 태그의 type이 password인지를 체크
  • text: input 태그의 placeholder에 출력될 텍스트

this.props.children

import React, { Component } from "react";

export default class FormLayout extends Component {
  render() {
    return (
      <div className="Form">
        <header>
          <div className="logo" />
        </header>
        {this.props.children} // 태그로 감싸진 부분은 이곳에 들어옴!
      </div>
    );
  }
}

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

로그인 / 회원가입 양쪽에서 모두 쓰이며, 같은 자리에 위치하고 있다. 이 부분을 children을 사용해 묶어줄 수 있다.

리액트 컴포넌트는 props로 children이라는 걸 받는다. 이를 통해 컴포넌트 태그와 태그 사이에 들어오는 값, 다른 태그들을 배열로 받아올 수 있다.
일단 간단히만 설명하자면, 앞으로 <FormLayout>과 </FormLayout> 로 감싸진 부분은 위 코드 예제의 this.props.children 자리에 들어오게 된다는 뜻이다.