리액트 초보자용 컴포넌트 구조 이해하기

리액트 초보자를 위한 컴포넌트 구조 이해하기

리액트를 배우는 과정에서 가장 핵심적인 부분 중 하나는 컴포넌트와 그 안에서 사용되는 Props의 개념입니다. 초보 개발자들이 리액트를 익힐 때, 단순히 코드를 따라치기만 하는 경우가 많습니다. 이런 접근은 궁극적으로 더 많은 시간과 노력을 요구하게 되며, 특히 기초 개념이 부족할 경우에는 중도에 포기하는 원인이 될 수 있습니다. 그래서 이번 글에서는 리액트의 컴포넌트와 Props에 대한 이해를 돕고자 합니다.

컴포넌트란 무엇인가?

리액트에서 컴포넌트는 사용자 인터페이스(UI)를 구성하는 가장 기본적인 구성 요소입니다. 이들은 작은 단위로 나뉘며, 여러 컴포넌트를 조합하여 복잡한 UI를 생성할 수 있습니다. 컴포넌트는 함수형과 클래스형 두 가지로 나뉘며, 각 유형은 사용 방식이 조금 다릅니다.

함수형 컴포넌트

함수형 컴포넌트는 JavaScript의 함수 형태로 정의되며, Props를 매개변수로 받아 JSX를 반환합니다. 이들은 상태를 가지지 않으며, 생명주기 메서드를 사용할 수 없습니다. 간단한 UI 요소를 생성할 때 주로 사용됩니다.

클래스형 컴포넌트

클래스형 컴포넌트는 JavaScript의 클래스로 정의되며, render() 메서드를 통해 JSX를 반환합니다. 이들은 상태를 관리할 수 있고, 생명주기 메서드를 사용할 수 있기 때문에 더 복잡한 UI를 구축하는 데 적합합니다.

부모와 자식 컴포넌트 구조

리액트에서는 컴포넌트 간의 관계가 매우 중요합니다. 부모 컴포넌트는 자식 컴포넌트를 렌더링하며, 자식 컴포넌트는 부모로부터 Props를 받아 사용할 수 있습니다.

예를 들어, 다음 코드를 살펴보겠습니다:

import React from 'react';
function Parent() {
 return (
  <div>
   <h1>부모 컴포넌트입니다.</h1>
   <Child name="Alice" />
   <Child name="Bob" />
  </div>
 );
}
function Child(props) {
 return (
  <div>
   <p>자식 컴포넌트이며 내 이름은 {props.name}입니다.</p>
  </div>
 );
}

위의 예제에서 Parent 컴포넌트는 Child 컴포넌트를 두 번 호출하고 각각의 이름을 전달합니다. Child 컴포넌트는 전달된 Props를 사용해 자신을 렌더링합니다. 이처럼 부모-자식 관계의 구조는 리액트에서 일반적이며, 데이터와 이벤트의 전달을 위해 Props와 여러 함수들을 사용합니다.

Props의 개념과 활용

Props는 “속성”이라는 뜻으로, 리액트에서 컴포넌트 간에 데이터를 전달하는 주요 방법입니다. 부모 컴포넌트에서 자식 컴포넌트로 정보를 전달할 때 주로 사용되며, 읽기 전용으로 설계되어 있습니다. 자식 컴포넌트는 받은 Props를 변경할 수 없습니다.

Props를 활용한 간단한 예제를 보겠습니다:

function Greeting(props) {
 return <h1>안녕하세요, {props.name}!</h1>;
}
function App() {
 return (
  <div>
   <Greeting name="리액트" />
   <Greeting name="세상" />
  </div>
 );
}

위 코드에서 App 컴포넌트는 Greeting 컴포넌트에 Props로 이름을 전달하고, Greeting 컴포넌트는 이 Props를 이용하여 사용자에게 인사합니다. 이처럼 Props는 컴포넌트 간의 정보 전달을 쉽고 명확하게 만들어 줍니다.

컴포넌트 재사용과 효율성

컴포넌트와 Props를 활용하면 같은 기능을 하는 컴포넌트를 여러 번 생성하여 사용할 수 있습니다. 서로 다른 Props를 통해 동일한 컴포넌트를 다양한 상황에서 재사용할 수 있습니다. 이러한 방식은 코드를 간결하게 하고 유지보수를 쉽게 만들어줍니다.

• 재사용성: 동일한 컴포넌트를 다양한 데이터로 반복 사용할 수 있습니다.
• 유지보수: 코드 중복을 줄여 관리와 수정이 용이해집니다.
• 조합성: 여러 컴포넌트를 조합하여 더 복잡한 UI를 만들 수 있습니다.

리액트의 컴포넌트 예제 코드

다음은 리스트 컴포넌트 예제입니다:

import React from 'react';
function ListItem(props) {
 return <li>{props.value}</li>;
}
function List(props) {
 const listItems = props.items.map((item, index) =>
  <ListItem key={index} value={item} />
 );
 return (
  <ul>
   {listItems}
  </ul>
 );
}
function App() {
 const items = ['사과', '바나나', '오렌지'];
 return (
  <div>
   <h1>내가 좋아하는 과일:</h1>
   <List items={items} />
  </div>
 );
}
export default App;

이 코드는 List 컴포넌트에서 items 배열을 반복하면서 각 항목을 ListItem 컴포넌트로 렌더링합니다. ListItem은 각 항목의 값을 표시하며, key Props를 사용하여 각 항목을 고유하게 구분합니다.

마무리하며

이번 포스트에서는 리액트의 컴포넌트와 Props에 대해 알아보았습니다. 컴포넌트는 UI의 핵심 구성 요소이며, Props는 컴포넌트 간에 데이터를 전달하는 유용한 방법입니다. 이러한 개념을 이해하면 리액트 개발에서 더욱 효율적이고 재사용 가능한 코드를 작성할 수 있습니다. 리액트를 처음 접하는 분들에게 이 글이 도움이 되기를 바랍니다.

자주 찾는 질문 Q&A