React – JSX와 렌더링 – 컴포넌트 렌더링 – 1 – 컴포넌트 분리와 재사용

작성자 wooah
React – JSX와 렌더링 – 컴포넌트 렌더링 – 1 – 컴포넌트 분리와 재사용

React – JSX와 렌더링 – 컴포넌트 렌더링 – 1 – 컴포넌트 분리와 재사용

안녕하세요 여러분! 😊
이번 시간에는 React의 핵심 장점 중 하나인 컴포넌트 분리와 재사용에 대해 알아보겠습니다.
React는 말 그대로 컴포넌트 기반 UI 라이브러리이기 때문에, 코드를 얼마나 잘 나누고 효율적으로 재사용하느냐가 개발의 질을 좌우해요!

1. 컴포넌트를 왜 분리하나요?

React에서는 컴포넌트를 마치 레고 블록처럼 생각해요.
작은 블록들을 조립해서 큰 구조물을 만들듯, 작은 UI 조각들을 나눠서 필요한 곳에서 조립하듯 쓰는 거죠.

🔧 컴포넌트 분리의 장점

  • 재사용성 : 여러 곳에서 같은 UI를 재사용 가능
  • 가독성 : 한 컴포넌트에 너무 많은 코드가 몰리지 않음
  • 유지보수성 : 기능이 명확하게 분리되어 수정이 쉬움
  • 테스트 용이성 : 독립적으로 테스트 가능

2. 컴포넌트를 어떻게 분리하나요?

예시: 하나의 컴포넌트에 모든 내용이 몰려있는 코드

function App() {
  return (
    <div>
      <h1>유저 목록</h1>
      <ul>
        <li>홍길동</li>
        <li>이순신</li>
        <li>강감찬</li>
      </ul>
    </div>
  );
}

이건 기능이 단순하긴 하지만, 리스트 항목이 많아지면 관리가 어려워져요.
따라서 User 컴포넌트와 UserList 컴포넌트로 분리해볼 수 있어요.

3. 컴포넌트 분리 예시

✅ User.js

function User({ name }) {
  return <li>{name}</li>;
}

export default User;

✅ UserList.js

import User from './User';

function UserList() {
  const users = ['홍길동', '이순신', '강감찬'];

  return (
    <ul>
      {users.map((user, index) => (
        <User key={index} name={user} />
      ))}
    </ul>
  );
}

export default UserList;

✅ App.js

import UserList from './UserList';

function App() {
  return (
    <div>
      <h1>유저 목록</h1>
      <UserList />
    </div>
  );
}

➡️ 이렇게 나누면 User 컴포넌트를 다른 화면이나 페이지에서도 재사용할 수 있어요!

4. 컴포넌트 파일 구조 예시

src/
├── components/
│   ├── User.js
│   ├── UserList.js
├── App.js
└── index.js

👌 컴포넌트를 나누는 기준은 하나의 기능 또는 역할 단위로 생각하시면 좋아요!

5. 컴포넌트는 재사용이 생명!

아래 예시처럼 버튼 컴포넌트를 하나 만들어두면, 다양한 상황에 재사용할 수 있어요.

✅ Button.js

function Button({ text, onClick }) {
  return (
    <button onClick={onClick} style={{ margin: '8px', padding: '8px 16px' }}>
      {text}
    </button>
  );
}

export default Button;

✅ App.js

import Button from './components/Button';

function App() {
  return (
    <div>
      <Button text="로그인" onClick={() => alert('로그인!')} />
      <Button text="회원가입" onClick={() => alert('회원가입!')} />
    </div>
  );
}

이렇게 하면 텍스트만 바꾸고 이벤트만 바꿔서 반복적인 UI를 간단히 조합할 수 있답니다.

6. 컴포넌트 재사용 시 props 활용법

컴포넌트는 **props(속성)**을 통해 동적으로 데이터를 주고받을 수 있어요.

function Profile({ name, age }) {
  return (
    <div>
      <h2>{name}님</h2>
      <p>{age}세</p>
    </div>
  );
}
<Profile name="민수" age={24} />
<Profile name="지영" age={30} />

➡️ 같은 Profile 컴포넌트를 여러 사람에게 재사용할 수 있게 되죠!

7. 언제 컴포넌트를 분리해야 할까요?

상황 컴포넌트 분리 추천
반복되는 JSX 구조가 있을 때 ✅ 분리
하나의 컴포넌트가 너무 커졌을 때 ✅ 분리
하나의 기능이나 역할이 명확할 때 ✅ 분리
단 한 번만 쓰이고 단순한 경우 ❌ 굳이 분리하지 않아도 OK

8. 고급 재사용 예: children 활용

function Card({ children }) {
  return (
    <div style={{ border: '1px solid gray', padding: '10px' }}>
      {children}
    </div>
  );
}
<Card>
  <h2>타이틀</h2>
  <p>내용입니다.</p>
</Card>

➡️ children을 이용하면 내부 내용이 자유롭게 바뀌는 범용적인 컴포넌트를 만들 수 있어요!

주의할 점 정리

주의사항 설명
무조건 분리만이 정답은 아님 너무 작게 나누면 오히려 관리가 어렵고 복잡해질 수 있어요
props를 잘 활용해야 함 재사용성을 높이려면 데이터 전달 구조를 신중히 설계해야 해요
key 속성은 꼭 지정 리스트 렌더링 시 map 안에서 key를 반드시 설정
파일 단위로 컴포넌트 분리 권장 하나의 파일에 여러 컴포넌트를 작성하면 가독성이 떨어짐

마무리하며

React의 컴포넌트는 분리하고 조합하는 기술이 핵심이에요.
작은 컴포넌트를 잘게 쪼개고, 필요한 곳에서 유연하게 재사용하면
유지보수하기 쉽고, 확장성도 뛰어난 코드를 만들 수 있어요!

다음 시간에는 이 컴포넌트에 데이터를 전달하는 방법인 **props(속성)**에 대해 더 깊이 파헤쳐 볼게요.
우리 함께 실력 레벨업 해봐요! 🚀💪

답글 남기기