컴포넌트와 props 01

10-04 컴포넌트와 props가 헷갈리는 상황,

특히 GradeData-GradeItem-index.js 3개 왔다갔다하는게 이해가 안되는 중...

Q1.

예를들어서<MyPropTypesSub> 이라는 컴포넌트가 있는데, 아래처럼 <MyPropTypesSub name='철민' age={22} /> 라고 하면, 하여튼 저 컴포넌트에 name이라는 변수와 age라는 변수를 보내는거야? 그리고 저 컴포넌트가 반환하는 내용 중에, 변수 name을 쓰는 것이 있으면 그 곳에 '철민'이라고 넣고, age라는 변수를 쓰면 거기에 숫자 22를 넣는거야?

 

 

 

A1.

네, 정확하게 이해하셨습니다! 😊

<MyPropTypesSub name='철민' age={22} /> 라고 작성하면, MyPropTypesSub 컴포넌트로 name과 age라는 이름의 데이터를(props) 보내는 것입니다.

---

구체적인 동작 과정

1. 컴포넌트 호출

• name='철민'과 age={22}는 각각 props로 MyPropTypesSub 컴포넌트로 전달됩니다.
• 여기서 name은 문자열 '철민', age는 숫자 22를 값으로 갖는 props의 일부입니다.

2. MyPropTypesSub 컴포넌트 내부에서 props 받기

MyPropTypesSub 컴포넌트는 아래처럼 props를 받습니다:

const MyPropTypesSub = ({ name, age }) => {
    // 여기서 name은 '철민', age는 22가 됩니다.
    return (
        <div>
            <h1>{name}</h1>
            <p>Age: {age}</p>
        </div>
    );
};

1. 구조 분해 할당:
   • props에서 name과 age를 구조 분해로 꺼냅니다.
   • name은 '철민', age는 22가 됩니다.
2. JSX에서 props 활용:
   • <h1>{name}</h1>는 name 값을 읽어 화면에 출력합니다. 즉, <h1>철민</h1>이 됩니다.
   • <p>Age: {age}</p>는 age 값을 읽어 <p>Age: 22</p>로 출력합니다.

3. 컴포넌트 반환 값

최종적으로 MyPropTypesSub는 아래 HTML을 반환합니다:

html

코드 복사

<div> <h1>철민</h1> <p>Age: 22</p> </div>

<div>
    <h1>철민</h1>
    <p>Age: 22</p>
</div>

---

요약

• <MyPropTypesSub name='철민' age={22} />에서 name과 age는 props로 전달됩니다.
• MyPropTypesSub는 이 props를 내부에서 받아, name을 사용하는 곳에는 '철민', age를 사용하는 곳에는 22를 넣습니다.
• 리턴된 JSX에서 props 값을 활용하여 최종적인 HTML이 출력됩니다.

---

비유로 이해하기

마치 컴포넌트를 "함수"라고 생각하면 됩니다:

function MyPropTypesSub({ name, age }) {
    return `<div><h1>${name}</h1><p>Age: ${age}</p></div>`;
}

• 함수를 호출하면서 name과 age를 전달하면(name='철민', age=22):
• 함수가 결과를 만들어내는 것처럼 컴포넌트도 화면에 해당 값을 표시합니다.