[ React ] 리액트 컴포넌트 분리 기준을 알아보자.

 

리액트 컴포넌트를 개발하다보면, 컴포넌트를 어떻게 분리해야할 것인가를 많이 고민한다.

또, 분리하여 어떠한 패턴을 이용하여 작성할지도 고민한다.

 

우선 컴포넌트를 분리하는 기준에 대해 알아보자.

 

🦴 컴포넌트 분리

1. ♻️ 재사용성 (Resualbility)

👉🏻 동일한 UI나 기능을 여러 곳에서 사용할 가능성이 있는 경우 컴포넌트를 분리한다.

👉🏻 ex. Button, Modal, Card, Input

 

코드 좀 더 이해하기 >> 유틸함수 cn(tailwind-merge)

tailwind-merge

function cn() {

  // : className을 합쳐주어 상위에서 className을 내려주었을 때, 앞에 정의한 스타일링 값을 덮어씌울 수 있다

}

👉🏻 호출하는 부모에서 스타일을 내려서 스타일을 수정하기에 용이하다.

import { ComponentProps } from "react";
import { cn } from "../utils/style";

type ButtonProps = ComponentProps<"button"> & {
  className?: string;
};

export default function Button({ children, className, ...props }: ButtonProps) {

  return (
    <button
      className={cn(
        "w-fit h-fit bg-black px-4 py-1 rounded-sm border-1 border-black-100",
        className
      )}
      {...props}
    >
      {children}
    </button>
  );
}

웬만하면 프로젝트에는 일관되는 디자인이 적용된다.

 

따라서 Button이라는 하나의 컴포넌트에 버튼 Props를 그대로 유지하면서 디자인을 입히고, 사용을 필요로 하는 곳에서 기존 button과 동일하게 <Button></Button>을 호출하여 사용한다.

import Button from "../components/Button";

export default function Main() {
  
  return (
    <div className="w-full h-full bg-bg-primary flex flex-col items-center justify-center gap-2">
      <Button>Click Me</Button>
      <Button>Double Click Me</Button>
      <Button className="bg-orange-500 border-white">I'm Orange</Button>
    </div>
  );
}

 

다음과 같이 <Button></Button> 만을 간단하게 활용하여 일관적인 디자인의 Button을 사용할 수 있으며, 호출할 때, className을 내려주어 스타일을 변경해줄 수 있다.

 

 

2. 🥇 단일 책임 원칙 (Single Responsibility Principle, SRP)

한 컴포넌트는 하나의 역할만을 수행하도록 한다.

👉🏻 하나의 컴포넌트가 여러 역할을 수행할 경우 유지보수가 어렵다.

👉🏻 컴포넌트를 이해하기 쉬움

 

로그인을 하기 위한 Form을 만들었다고 하였을 때,

import Button from "./Button";
import Input from "./Input";

export default function LoginForm() {
  return (
    <form className="flex flex-col justify-center items-center px-5 py-3 gap-5 w-[40rem] h-[25rem] border-1 border-gray-400 rounded-lg bg-black-400 shadow-lg shadow-black-600 ">
      <h1 className="text-2xl font-bold">Login</h1>

      <Input placeholder="ID" />
      <Input placeholder="Password" type="password" />

      <Button type="submit" className="mt-10">
        Sign In
      </Button>
    </form>
  );
}

 

폼에 로그인 타이틀, 아이디, 비밀번호, 로그인버튼.. 로그인 담당 컴포넌트라는 것을 알 수 있다.

 

 

회원가입 기능은?

따로 Auth를 담당하는 컴포넌트를 만들어서

import { ComponentProps } from "react";
import LoginForm from "./LoginForm";
import Button from "./Button";

type AuthProps = ComponentProps<"div">;

export default function Auth({ children, ...props }: AuthProps) {
  return (
    <main
      className="flex flex-col justify-center items-center px-5 py-3 gap-5 w-[40rem] h-[25rem] border-1 border-gray-400 rounded-lg bg-black-400 shadow-lg shadow-black-600 "
      {...props}
    >
      <LoginForm />
      <Button className="bg-gray-400">Sign Up</Button>
    </main>
  );
}

"인증에서 로그인 기능과 회원가입 기능이 있다."같이 컴포넌트를 분리해주었다.

Auth는 로그인과 회원가입 기능의 두 가지 기능을 하지만 전체적으로 인증이라는 하나의 기능을 담당한다.

⭐컴포넌트 네이밍도 중요하다.

 

3. 👀 가독성 (Readability)

👉🏻 코드가 한 눈에 들어오고 쉽게 이해할 수 있도록 구조를 잡는 것이 중요하다.

👉🏻 너무 긴 코드가 생긴다면 가독성을 떨어뜨리므로 적절한 단위로 분리해야한다.

 

위 코드를 보면 각 컴포넌트 파일을 열람했을 때, 어떠한 컴포넌트들이 있으며, 어떠한 역할을 하는지 읽기 쉽다.

 

❌ 컴포넌트를 분리를 안 한 경우

import { ComponentProps } from "react";
import LoginForm from "./LoginForm";
import Button from "./Button";

type AuthProps = ComponentProps<"div">;

export default function Auth({ children, ...props }: AuthProps) {
  return (
    <main
      className="flex flex-col justify-center items-center px-5 py-3 gap-5 w-[40rem] h-[25rem] border-1 border-gray-400 rounded-lg bg-black-400 shadow-lg shadow-black-600 "
      {...props}
    >
      <form className="flex flex-col justify-center items-center gap-5 w-full">
        <h1 className="text-2xl font-bold">Login</h1>
        <input className="w-full h-10 bg-[#222] px-2 py-1 rounded-xs border-2 border-black-100  focus:border-cyan-600 outline-none" />
        <input className="w-full h-10 bg-[#222] px-2 py-1 rounded-xs border-2 border-black-100  focus:border-cyan-600 outline-none" />
        <button className="w-full h-[3rem] bg-cyan-600 px-4 py-1 rounded-sm border-1 border-gray-400 shadow-lg cursor-pointer hover:brightness-110">
          Sign In
        </button>
      </form>
      <button className="w-full h-[3rem] bg-cyan-600 px-4 py-1 rounded-sm border-1 border-gray-400 shadow-lg cursor-pointer hover:brightness-110">
        Sign Up
      </button>
    </main>
  );
}

물론 인풋, 인풋, 버튼, 버튼으로 대략 알아 볼 수 있지만 너무 난잡하여 집중을 흐트러뜨린다.

시험 기간에 다들 방 청소하잖아😉

 

⭕ 컴포넌트로 분리한 경우

import Button from "./Button";
import Input from "./Input";

export default function LoginForm() {
  return (
    <form className="flex flex-col justify-center items-center gap-5 w-full">
      <h1 className="text-2xl font-bold">Login</h1>

      <Input placeholder="ID" />
      <Input placeholder="Password" type="password" />

      <Button type="submit" className="mt-10">
        Sign In
      </Button>
    </form>
  );
}

더 깔끔해지고, 어떠한 기능을 하는지에 대해 직접 해당 컴포넌트로 들어가서 확인하면 하나씩 읽어나가기 편리하다.

또, 특정 컴포넌트에서 오류가 발생한 경우 해당 컴포넌트의 코드만을 분석하면 된다.

 

 

4. 🎨 UI 요소

👉🏻 하나의 UI 요소가 복잡하거나 길어지면 별도의 컴포넌트로 분리한다.

👉🏻 ex. Form, Table, Card, Dropdown, Sheet와 같은 UI 요소는 독립적인 컴포넌트로 관리하는 것이 좋다.

import Button from "./Button";

type CardProps = {
  imageSrc: string;
  onhandlePurchase: () => void;
};

export default function Card({ imageSrc, onhandlePurchase }: CardProps) {
  return (
    <main className="w-50 h-70 bg-bg-primary flex flex-col items-center justify-between bg-black-100 rounded-lg py-3 px-3  gap-2">
      <img
        className="w-full h-full flex flex-1 rounded-lg items-center justify-center bg-white/30 text-black"
        src={imageSrc}
        alt="product"
      />
      <Button onClick={onhandlePurchase}>Purchase</Button>
    </main>
  );
}

 

 

 

 

5. 🤒 상태와 라이프사이클 (State and LifeCycle)

상태는 컴포넌트 내부에서 관리하는 데이터 -> 변경되면 리렌더링 발생

라이프사이클은 리액트 컴포넌트가 생성, 업데이트, 제거 될 때를 의미

 

따라서, 개발 시, 해당 컴포넌트들이 성능과 동작에 어떻게 미치며, React Developer Tool 와 같은 프로그램을 사용하여 불필요한 리렌더링이 발생하고 있지는 않은지 확인한다.

React Developer Tools - Chrome 웹 스토어

 

---

🍙 응집도

응집도란, 컴포넌트가 하나의 책임 또는 목적(SRP)을 잘 수행하고 있는가? 를 말한다.

여기서, 좋은 응집도란 하나의 컴포넌트가 명확한 기능 하나만을 담당한다.

ex)

⭕ UserProfileCard: 유저 정보를 카드 형태로 보여주는 UI 컴포넌트

❌ Dashboard: 컴포넌트 안에서 유저 목록을 불러오고, 차트를 그려주고, 알림을 띄우준다.

 

// ❌ 안 좋은 예시
const Dashboard = () => {
  return (
    <div>
      <UserList/>
      <SalesChart/>
      <NotificationPanel/>
    </div>
  ) 
}

// ⭕ 좋은 예시
const SalesChart = ({data: SalesData}) => {

  return <Chart data={data}/>
}

 

위처럼 대시보드는 뭔가 전체적인 것을 보여주면서 여러 기능을 담당하는 것으로 파악된다. 하지만 컴포넌트의 기준에 적합하지 않다.

레이아웃 배치의 컨테이너 역할이 적당하다.

💡Tip. 컴포넌트 이름을 보고 "이게 무슨 역할을 하는지" 바로 알 수 있어야 한다.

 

🍔 결합도

결합도란, 다른 컴포넌트 모듈과 얼마나 강하게 연결되어 있는가?

낮은 결합도는 props로만 필요한 최소 정보만 주고 받으며 동작

높은 결합도는 부모 상태에 과하게 의존하거나, 내부 로직이 상위 구조에 존재한다.

 

// ❌ 안 좋은 예시
const UserCard = () => {
  const user = globalStore.users[0];
  return <div>{user.name}</div>;
}

// ⭕ 좋은 예시
const UserCard = ({user}) => {
  return <div>{user.name}</div>
}

 

생각을 해보자.

컴포넌트를 작성하는 이유는 여러 군데에서 불러와서 내 마음대로 바꿔서 사용하기 위해서이다.

예를 들어, Button을 만들어서 해당 버튼을 누르면 작동할 onClick() 이벤트를 props로 받아와서 일반 버튼과 마찬가지로 호출하는 것에서 맛별로 설정한다.

이 처럼, 컴포넌트 내에서 동작을 정의하는 것이 아닌 props를 통하여 결합도를 낮춘다.

 

위 코드를 보면 UserCard의 나쁜 예시는 외부에서의 상태에 묶여있어 재사용및 테스트가 어려워진다.

 

 

✨ 결론

⬆️ 응집도는 크게 

⬇️ 결합도는 작게