React (컴포넌트의 분할과 Children Prop)

Jeonghun·2023년 5월 25일

목록 보기

2/21

React 컴포넌트 분할과 Children

- 컴포넌트 분할

React는 Component 기반으로 앱을 구성한다. 이런 컴포넌트 시스템 덕분에 우리는 기능 별로, 또는 보기 편한 대로 코드를 나눠 작성할 수 있다.

🤔 그럼 컴포넌트를 어떻게 분할할까?
간단히 말해서, 하나의 컴포넌트는 하나의 기능만 수행해야 한다. 예를 들어, "사용자 프로필" 컴포넌트와 "사용자 목록" 컴포넌트는 별도로 분리하는 것이 좋다. 각각의 컴포넌트는 독립적으로 작동하며, 필요한 props만을 받아서 데이터를 처리한다.

📌 컴포넌트 분할 예시

// UserProfile 컴포넌트
function UserProfile({ name, age }) {
  return (
    <div>
      <h2>{name}</h2>
      <p>{age} years old</p>
    </div>
  );
}

// UserList 컴포넌트
function UserList({ users }) {
  return (
    <div>
      {users.map((user) => (
        <UserProfile key={user.id} name={user.name} age={user.age} />
      ))}
    </div>
  );
}

위 코드와 같이 컴포넌트를 기능별로 분할하여 코드의 재사용성을 높이고, 유지 보수를 쉽게 만들 수 있으며, 이것이 바로 React에서의 컴포넌트 분할을 하는 이유이다.

🤔 컴포넌트를 나눠서 좋은점이 뭔데?
React에서 컴포넌트 분할은 주로 크게 두 가지 목적을 가진다.

재사용성(Reusability): 많은 웹 애플리케이션들이 공통적으로 사용하는 특정 기능 또는 UI 요소들이 존재한다. 예를 들어, 버튼, 카드, 폼 요소 등은 다양한 페이지에서 반복적으로 사용될 수 있다. 이런 공통 컴포넌트를 분할하여 만들면, 이를 필요한 곳에서 재사용할 수 있게된다. 따라서 코드의 중복을 줄이고, 유지 보수를 편리하게 만들어 주는 역할을 한다.

가독성(Maintainability): 코드가 길어지고 복잡해질수록 이해하는 데 어려움이 생길 수 있다. 따라서, 기능 또는 뷰 별로 컴포넌트를 잘 분할해두면, 개별 컴포넌트는 간단하고 명확한 역할을 가지게 된다. 이를 통해 코드를 이해하거나 수정하는 데 도움이 된다.

📌 컴포넌트 분할 예시(2)

// App 컴포넌트
// Header, MainContent, Footer 세 개의 하위 컴포넌트로 구성된다.
function App() {
  return (
    <div>
      <Header />
      <MainContent />
      <Footer />
    </div>
  );
}

// Header 컴포넌트
// 웹 사이트의 헤더(제목)을 렌더링 한다.
function Header() {
  return <h1>Welcome to My Website</h1>;
}

// MainContent 컴포넌트
// 여러 개의 Article 컴포넌트를 통해 여러 개의 글을 렌더링한다.
function MainContent() {
  return (
    <div>
      <Article />
      <Article />
      <Article />
    </div>
  );
}

// Article 컴포넌트
// 각 글은 제목과 본문 내용으로 구성된다.
function Article() {
  return (
    <div>
      <h2>Article Title</h2>
      <p>Article content...</p>
    </div>
  );
}

// Footer 컴포넌트
// 웹 사이트의 푸터를 렌더링한다.
function Footer() {
  return <p>Copyright &copy; 2023</p>;
}

export default App;

이 코드에서 'App' 컴포넌트는 'Header', 'MainContent', 'Footer'라는 여러 하위 컴포넌트로 분할되어 있다. 또, 'MainContent' 컴포넌트는 다시 여러 'Article' 컴포넌트로 분할되어 있다. 각 컴포넌트는 각각 헤더, 본문 내용, 글, 푸터 등을 나타내는 역할을 한다. 이처럼 컴포넌트를 분할하면 각 컴포넌트의 역할이 명확해져서, 코드를 더 쉽게 이해하고 관리할 수 있다.

- Children Prop

🤔 Children Props 란?
React 컴포넌트에서 children은 부모 컴포넌트 사이에서 자식 컴포넌트를 가리키는 특별한 prop을 말한다. 여기서 중요한 점은, children prop은 명시적으로 전달하지 않아도 부모 컴포넌트 사이의 내용을 자동으로 전달받는다는 것이다. 이를 통해 컴포넌트가 재사용 가능한 '틀' 역할을 하도록 할 수 있다.

📌 Children Prop 예시

// Card 컴포넌트
function Card({ children }) {
  return <div className="card-style">{children}</div>;
}

// Card 컴포넌트의 사용
<Card>
  <h2>안녕하세요!</h2>
  <p>React 학습 중입니다.</p>
</Card>

위 코드를 살펴보면 'Card' 컴포넌트는 <h2> 태그와 <p> 태그를 자식 요소로 가지게 된다. 이 자식 요소들은 children props를 통해 'Card' 컴포넌트로 전달되며, 결과적으로 'Card' 컴포넌트는 받은 자식 요소를 그대로 렌더링하게 된다.

이런 방식으로 children prop을 사용하면, 컴포넌트를 재사용 가능한 '틀'처럼 사용할 수 있으며, 이 틀 안에 어떤 내용을 넣을지는 컴포넌트를 사용하는 측에서 결정할 수 있게 된다. 이는 코드의 재사용성을 높이고 유연성을 제공한다.

📌 Children prop의 장점

재사용성: children prop을 사용하면, 공통 구조를 가진 컴포넌트를 쉽게 재사용할 수 있다. 예를 들어, 동일한 스타일과 레이아웃을 가진 컴포넌트 안에 다른 내용을 삽입하고 싶을 때, children prop을 사용하면 이를 쉽게 구현할 수 있다.
유연성: children prop은 JSX 요소뿐만 아니라 문자열, 숫자, 배열 등 어떤 종류의 데이터도 받을 수 있다. 또한, 컴포넌트 자체도 받을 수 있으므로, 이를 이용해 동적으로 컴포넌트를 조합하는 등 매우 유연한 방식으로 코드를 작성할 수 있다.
가독성: children prop을 사용하면, 컴포넌트의 시작 태그와 종료 태그 사이에 내용을 직접 삽입할 수 있다. 이는 HTML과 유사하게 코드를 작성할 수 있으므로, 코드를 읽기 쉽다.
코드의 명확성: children prop을 사용하면, 어떤 컴포넌트가 자식 컴포넌트를 어떻게 가지고 있는지, 그리고 그 자식 컴포넌트들이 어떻게 조합되는지 코드 상에서 명확하게 확인할 수 있다. 이는 코드의 가독성과 이해도를 향상시키는 데 도움이 된다.

Jeonghun

안녕하세요, 프론트엔드 개발자 임정훈입니다.

이전 포스트

React (컴포넌트, props)

다음 포스트