45일차[props / attribute / children]

진하의 메모장·2025년 3월 12일

Props React attribute children default props destructuring 구조분해

공부일기

목록 보기

51/66

2025 / 03 / 12

오늘 수업 시간에는 컴포넌트를 생성하고 재 사용성에 대해 배웠습니다.
값을 동적 할당하는 두 가지의 방법(1. attribute / 2. children)을 이해하고 사용해보았습니다. 이 전에 배운 객체와 배열 / 구조 분해를 활용하였습니다.

💌 Props

프로퍼티

컴포넌트에 데이터를 전달하는 방법입니다.

부모 컴포넌트가 자식 컴포넌트에 데이터를 전달할 때 사용됩니다.

전달될 때는 자바스크립트의 객체 형태로 전달됩니다.

1. 특징

데이터 전달

부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달하는 역할을 합니다.

불변성

자식 컴포넌트에서 props의 값을 변경할 수 없습니다.

props는 읽기 전용입니다.

커스텀 속성

HTML의 attribute처럼, 자식 컴포넌트에 필요한 값을 지정할 수 있습니다.

2. 사용 예시

Props의 사용 예시입니다.

// List 컴포넌트 정의
function List({ title, description = "없음", children }) {
   return (
      <li>
         <h2>{title}</h2>
         <p>{description}</p>
         {children}
      </li>
   );
}

// App 컴포넌트에서 List 컴포넌트 사용
function App() {
   const goals = [
      { title: "리액트 공부하기", description: "리액트를 공부하고 싶어요" },
      { title: "집에 가고 싶어요", description: "오늘은 컨디션이 괜찮네요" },
      { title: "학교 가기 싫어요" },  // description이 없을 때 기본값 "없음"
   ];

   return (
      <div id="app">
         <h1>리액트 연습하기</h1>
         <p>목표 설정하기</p>
         <ul>
            {/* props를 이용하여 데이터 전달 */}
            <List {...goals[0]}>
               <div>리액트 공식 문서 확인</div>
            </List>
            <List {...goals[1]}>
               <div>그래도 집에 보내줘</div>
            </List>
            <List {...goals[2]}>
               <div>금요일 언제 오지</div>
            </List>
         </ul>
      </div>
   );
}

List 컴포넌트

title, description (기본값 "없음")을 props로 받아서 화면에 표시합니다.

{...goals[0]} 구문

객체 전개 문법을 사용하여 goals 배열에서 각 항목을 props로 전달하는 방법입니다.
title과 description 값이 자동으로 전달됩니다.

children

List 컴포넌트 사이에 들어 있는 추가 콘텐츠를 의미합니다.
예시에서는 <div>리액트 공식 문서 확인</div>가 children으로 전달됩니다.

💌 Attribute

부모 컴포넌트에서 자식 컴포넌트로 작은 데이터를 전달할 때 사용되는 방식입니다.

HTML의 attribute와 비슷한 형태로, 자식 컴포넌트는 props를 통해 전달받은 속성 값에 접근할 수 있습니다.

1. 사용 방법

작은 데이터를 전달할 때 유용합니다.

데이터는 자식 컴포넌트의 props 객체로 전달됩니다.

부모 컴포넌트에서 자식 컴포넌트로 속성(attribute) 형태로 값을 전달하며, 이를 자식 컴포넌트에서 props로 받아 사용합니다.

💌 Children

컴포넌트의 자식 콘텐츠를 의미합니다.

컴포넌트가 다른 컴포넌트의 내부 콘텐츠를 자식으로 전달받을 수 있습니다.

자식 콘텐츠는 props.children으로 접근할 수 있습니다.

1. 특징

컴포넌트 간 콘텐츠 전달

부모 컴포넌트에서 자식 컴포넌트 사이의 콘텐츠를 전달할 때 사용됩니다.

자동 전달

리액트는 children을 자동으로 모든 커스텀 컴포넌트에 전달합니다.

2. 사용 예시

Children의 사용 예시입니다.

function List({ title, description = "없음", children }) {
   return (
      <li>
         <h2>{title}</h2>
         <p>{description}</p>
         {children} {/* children은 컴포넌트 사이에 전달된 콘텐츠를 나타냄 */}
      </li>
   );
}

function App() {
   const goals = [
      { title: "리액트 공부하기", description: "리액트를 공부하고 싶어요" },
      { title: "집에 가고 싶어요", description: "오늘은 컨디션이 괜찮네요" },
      { title: "학교 가기 싫어요" },  // description이 없을 때 기본값 "없음"
   ];

   return (
      <div id="app">
         <h1>리액트 연습하기</h1>
         <p>목표 설정하기</p>
         <ul>
            <List {...goals[0]}>
               <div>리액트 공식 문서 확인</div>
            </List>
            <List {...goals[1]}>
               <div>그래도 집에 보내줘</div>
            </List>
            <List {...goals[2]}>
               <div>금요일 언제 오지</div>
            </List>
         </ul>
      </div>
   );
}

List 컴포넌트 내부에서 {children}은 <div>리액트 공식 문서 확인</div> 같은 자식 콘텐츠를 출력합니다.
부모 컴포넌트인 App에서 자식 콘텐츠로 제공한 내용은 List 컴포넌트의 children으로 전달되며, 해당 컴포넌트 내에서 {children}으로 표시됩니다.

💌 정리하기

아래는 Props, Attribute, Children의 차이점을 간단히 비교한 표입니다.

구분	Props	Attribute	Children
정의	리액트 컴포넌트에 데이터를 전달하는 방법	HTML 요소의 속성으로, 태그에 포함된 값	부모 컴포넌트에서 자식 컴포넌트로 전달되는 콘텐츠
사용 위치	리액트 컴포넌트의 인수(파라미터)로 전달	HTML 태그 내에서 사용	컴포넌트의 열림 태그와 닫힘 태그 사이에 사용
전달 방식	자식 컴포넌트에 객체 형태로 전달	부모에서 자식으로 속성 형태로 전달	부모 컴포넌트에서 자식 컴포넌트의 내용으로 전달
형태	객체 형태로 여러 값을 전달	문자열, 숫자, 불리언 등 단일 값으로 전달	JSX 코드 또는 HTML 콘텐츠 형태로 전달
기본값	기본값 설정 가능 (기본값을 설정하지 않으면 undefined)	기본값 설정 불가	기본값 설정 불가
수정	읽기 전용으로 자식 컴포넌트에서 사용	수정 가능	부모에서 자식으로 전달된 콘텐츠는 수정 불가
용도	자식 컴포넌트에 데이터를 전달할 때 사용	HTML 속성 값 설정 시 사용	자식 컴포넌트에 JSX 코드나 콘텐츠를 전달할 때 사용

Props

자식 컴포넌트로 데이터를 객체 형태로 전달합니다.

컴포넌트 간 데이터 흐름에 사용됩니다.

Attribute

HTML의 속성으로, 태그 내에서 데이터를 단일 값 형태로 전달합니다.

Children

부모 컴포넌트에서 자식 컴포넌트로 JSX 코드나 HTML 콘텐츠를 전달할 때 사용됩니다.

45일차

HTML을 할 때 child는 배워봤는데 Children이라는 개념은 처음이라 낯설었습니다.

Props는 jQuery로 코드를 작성할 때 사용해봐서 어렵진 않았습니다.

자바스크립트를 할 때 자주 사용했던 객체와 배열은 기본이고 구조 분해 할당이 리액트에서 자주 사용된다는 것이 신기했고, 그 당시에 좀 자세하게 공부해놔서 다행이라는 생각이 들었습니다. ₊·◟(⌯ˇ - ˇ⌯)◜‧