컴포넌트 분리

분리 기준

• 공식문서 기준
  • UI일부가 여러번 사용되거나, UI 일부가 자체적으로 복잡한 경우
• 프로젝트의 기준점에 따라
  • View와 로직 분리
  • state에 따라 분리

분리 과정 (어떻게 컴포넌트를 재사용 해야할까)

1. 재사용하고자 하는 컴포넌트의 UI에서 동일한 요소와 다른요소 파악

로그인 컴포넌트의 구성요소 : 로고, 타이틀, 입력창(이메일, 비밀번호), 회원가입 링크, 구분선, 소셜로그인 버튼
회원가입 컴포넌트의 구성요소 : 로고, 타이틀, 입력창(이름, 이메일, 비밀번호), 로그인 링크, 구분선, 소셜 로그인 버튼

• 동일한 요소 : 로고, 구분선, 소셜 로그인 버튼, 전체적인 레이아웃
• 다른 요소 : 타이틀, 입력창(이름추가), 버튼의 타이틀, 링크 메세지

예시

다른 요소의 데이터를 부모 컴포넌트에서 생성하고 그 데이터를 자식 컴포넌트에서 사용한다
다른 요소의 데이터를 객체로 저장한 뒤 props로 자식 컴포넌트에 데이터를 전달한다

import React from "react";
import User from "../list/User";
import "./Modal.scss";

const Modal = () => {
  const isSelectLogin = true;
  
  return (
    <div className="modal">
    	<User content={isSelectLogin ? LOGIN_DATA : SIGNUP_DATA}/>
	</div>
  );
};
//2. 다른 요소들을 데이터로 구성
const LOGIN_DATA = {
  title: "로그인",
  url: "/signup",
  text: "계정이 없으신가요? 회원가입"
}

const SIGNUP_DATA = {
  title: "회원가입",
  url: "./login",
  text: "이미 가입하셨나요? 로그인"
} 
export default Modal;

여기서 로그인과 회원가입의 구성요소에서 다른요소를 어떻게 대치할지 생각해보자
다른요소의 데이터에 따라 하나의 컴포넌트에서 다른 UI를 보여줄 수 있도록 해야한다

import { Link } from "react-router-dom";
import "./Login.scss";

const User = ({content}) => {
  //3. 해당 데이터를 하나의 컴포넌트에서 필요한 곳에 사용
  const {title, text, url} = content; //구조분해할당
  <div className="watchaContainer">
    <header className="logo" />
    <h2 className="title">{title}</h2>
  	<form>
      {title === "회원가입" &&( //조건부 렌더링
       <input className="input" type="text" placeholder="이름" />
       )}
      <input className="input" type="email" placeholder="이메일" />
      <input className="input" type="password" placeholder="비밀번호" />
      <button className="button">{title}</button>
  	  <Link to={url} className="link">
        {text}
      </Link>
    </form>
  </div>
}
export default User;