리액트 컴포넌트와 Props 완전 정리

리액트에서 웹 페이지를 만들 때 가장 중요한 개념 중 하나는 컴포넌트(Component)입니다.
컴포넌트는 화면에 보여질 HTML 구조를 함수처럼 재사용 가능한 조각으로 만든 것을 의미합니다.
이 글에서는 컴포넌트의 기본 개념, Props의 활용 방법, 그리고 다양한 Prop 문법까지 정리하겠습니다.

---

1. 컴포넌트(Component)란?

컴포넌트는 화면을 구성하는 작은 단위입니다.
예를 들어, 웹 페이지의 상단 제목과 이미지를 보여주는 Header, 핵심 개념 하나를 보여주는 CoreConcept,

그리고 전체 화면을 감싸는 App이 모두 컴포넌트입니다.

 

function Header() { return ( <header> <h1>React Essentials</h1> </header> ); }

• Header는 화면의 헤더 부분을 담당합니다.
• App 컴포넌트에서 Header를 호출하면 화면에 해당 내용이 렌더링됩니다.

---

2. Props란?

Props(속성)은 부모 컴포넌트가 자식 컴포넌트에게 정보를 전달하는 방법입니다.
Props를 통해 자식 컴포넌트는 부모로부터 받은 데이터를 활용하여 화면을 동적으로 구성할 수 있습니다.

예를 들어 CoreConcept 컴포넌트를 사용할 때:

 

<CoreConcept title="Components" description="The core UI building block." image={componentImg} />

• title, description, image가 모두 Prop입니다.
• CoreConcept 컴포넌트 안에서는 props.title, props.description, props.image로 접근하여 사용할 수 있습니다.

 

function CoreConcept(props) { return ( <li> <img src={props.image} alt={props.title} /> <h3>{props.title}</h3> <p>{props.description}</p> </li> ); }

---

3. 배열과 Props 활용

여러 개의 데이터를 관리할 때는 배열을 활용하면 편리합니다.

export const CORE_CONCEPTS = [ { image: componentsImg, title: 'Components', description: 'The core UI building block.' }, { image: jsxImg, title: 'JSX', description: 'Return HTML(ish) code to define the markup.' }, { image: propsImg, title: 'Props', description: 'Make components configurable by passing input data.' }, { image: stateImg, title: 'State', description: 'React-managed data which triggers UI updates.' }, ];

• 배열 안의 각 객체를 하나의 CoreConcept으로 사용할 수 있습니다.
• 화면에 표시할 때는 배열의 각 요소를 Prop으로 전달합니다.

 

<CoreConcept title={CORE_CONCEPTS[0].title}

description={CORE_CONCEPTS[0].description}

image={CORE_CONCEPTS[0].image} />

• [0]은 배열의 첫 번째 요소를 의미합니다.
• [1], [2] 등으로 다른 개념들을 순서대로 전달할 수 있습니다.

---

4. 단일 Prop 객체 전달

여러 Prop을 개별적으로 전달하는 대신 객체 하나로 묶어서 전달할 수도 있습니다.

 

<CoreConcept concept={CORE_CONCEPTS[0]} />

• CoreConcept 컴포넌트에서는 하나의 Prop만 받습니다.

 

function CoreConcept({ concept }) {

const { title, description, image } = concept;

return ( <li> <img src={image} alt={title} /> <h3>{title}</h3> <p>{description}</p> </li> ); }

• 이렇게 하면 코드가 훨씬 깔끔해집니다.

---

5. Rest Property로 그룹화

여러 Prop을 한 번에 Rest Property 문법으로 객체화할 수도 있습니다.

 

function CoreConcept({ ...concept }) { return ( <li> <img src={concept.image} alt={concept.title} /> <h3>{concept.title}</h3> <p>{concept.description}</p> </li> ); }

• 여러 개의 Prop을 ...concept으로 묶어서 처리할 수 있습니다.
• 많은 Prop을 다룰 때 매우 유용합니다.

---

6. 기본 Prop 값(Default Prop)

선택적 Prop이 있을 때는 기본값을 설정할 수 있습니다.

 

function Button({ caption, type = "submit" }) { return <button type={type}>{caption}</button>; }

• type을 전달하지 않아도 기본값 "submit"이 적용됩니다.
• caption은 필수이므로 기본값이 없습니다.

 

<Button caption="Click me" /> // type="submit" 자동 적용 <Button type="reset" caption="Reset" /> // type="reset" 적용

---

7. 마무리

• 컴포넌트: 화면의 재사용 가능한 조각
• Props: 부모가 자식에게 데이터를 전달하는 방법
• 다양한 문법: 단일 객체 전달, Rest Property, 기본값 등

Props를 잘 활용하면, 컴포넌트 재사용성이 높아지고, 코드가 깔끔하고 효율적이 됩니다.
리액트에서 Props를 이해하는 것은 동적 웹 페이지를 만들 때 가장 중요한 기초입니다.