React에서의 props 와 children

// MyChildrenSub.js -> 10-04 props 단원의 my_children 안의 파일.

import React from 'react';

import PropTypes from 'prop-types';

const MyChildrenSub = ({width, height, children}) => { {/** 여기에서 쓰이는 children은 마치, props 처럼 기능이 설정된 예약어인가????? */}
    /** CSS 속성값을 변수화 할 경우  JSON 객체로 구성한다 */
    const myStyle = {
        width: width+'px',
        height: height+'px',
        border: '5px solid #d5d5d5',
        padding:'20px',
        margin:'10px',
        backgroundColor : '#eeeeee'
    };

    return (
        <div>
            <h3>MyChildrenSub</h3>
            <div style={myStyle}>{children}</div> {/** 여기에서 쓰이는 children은 마치, props 처럼 기능이 설정된 예약어인가????? */}
        </div>
    );
};

// 속성들에 대한 타입 정의
MyChildrenSub.propTypes={
    width:PropTypes.number.isRequired,
    height:PropTypes.number.isRequired,
    children:PropTypes.string
};

// 속성들에 대한 기본값을 JSON으로 정의 (객체이름 고정)
MyChildrenSub.defaultProps={
    width:300,
    height:100,
    children:"내용이 없습니다."
};

export default MyChildrenSub;

Q1.

궁금한 점들이 있어. 이 코드에서, PropTypes 를 import 해오고 난 뒤에 children 이란 대상이 예약어 비슷한 상태로 쓰게 되는 것인지, 여기서 const MyChildrenSub 는 선언은 상수인데 내용물은 함수인데, 이건 도대체 뭔지가 궁금해.

 

 

 

A1.

children의 역할과 예약어 여부

React에서 children은 예약어 비슷한 상태로 사용됩니다. 이는 React에서 제공하는 내장된 특수 prop으로, 컴포넌트의 자식 요소를 나타냅니다. 아래에 간단히 설명드리겠습니다:

children의 특징:

• 예약된 용도: children은 React에서 예약된 용도로 사용됩니다. 특별히 선언하지 않아도 React가 자동으로 전달합니다.
• 사용 목적: 부모 컴포넌트에서 자식 컴포넌트의 태그 안에 넣은 내용을 전달하는 데 사용됩니다.
• 예:

<MyChildrenSub width={200} height={100}>
  이 내용이 children으로 전달됩니다.
</MyChildrenSub>

위 코드에서 "이 내용이 children으로 전달됩니다."라는 텍스트가 MyChildrenSub 컴포넌트의 children으로 전달됩니다.

 

코드 속의 children

MyChildrenSub 컴포넌트는 children을 prop으로 받아 그대로 렌더링하고 있습니다:

<div style={myStyle}>{children}</div>

즉, 부모 컴포넌트에서 전달한 자식 콘텐츠가 여기에 출력됩니다.

PropTypes와 관련성

PropTypes를 통해 children의 데이터 타입을 명시할 수 있습니다:

children: PropTypes.string

이 코드에서는 children이 문자열이어야 한다고 명시하고 있으며, 전달된 값이 문자열이 아닐 경우 React에서 경고를 출력합니다.

 

정리

children은 React에서 예약된 특수 prop으로, 부모 컴포넌트가 전달하는 자식 콘텐츠를 나타냅니다.

 

 

 

Q2.

그럼 children 이란 이름을 바꿔서 쓸 수는 없는거야?

 

 

 

A2.

React의 children prop은 특수 prop으로, 이름을 바꿔서 쓸 수는 없습니다. 그러나, 특정 상황에서 비슷한 기능을 원하지만 이름을 변경하거나 더 많은 유연성을 원한다면 다양한 방법이 있습니다.

 

~~~~생략

결론

• children은 React의 내장된 기본 prop으로, 이름을 바꿀 수는 없습니다.
• 하지만:
  1. 다른 prop 이름으로 대체(content, data 등).
  2. children과 다른 props를 조합.
  3. render props 또는 커스텀 함수 사용.

 

 

PS.

-> 강사왈, 이름을 바꿔 쓸 수 없는 느낌으로 접근한다면, 예약어와 같은 느낌이 맞다고 하심.