컴포넌트와 props 02

컴포넌트와 props 01에 이어서...

 

Q1.

<GradeItem key={0} name="철수" level={1} sex="남자" kor={98} eng={78} math={88} sinc={64} /> 이렇게 입력하면, GradeItem = ({ name, level, sex, kor=0, eng=0, math=0, sinc=0 }) 이렇게 입력받은 것과 같은거야?

 

 

 

A1.

네, 정확히 이해하셨습니다! 🎉

<GradeItem 
    key={0}
    name="철수"
    level={1}
    sex="남자"
    kor={98}
    eng={78}
    math={88}
    sinc={64}
/>

이 JSX 코드는 GradeItem 컴포넌트를 호출하면서 props를 전달하는 역할을 합니다. 전달된 props는 GradeItem 내부에서 아래와 같이 받습니다:

GradeItem = ({ name, level, sex, kor=0, eng=0, math=0, sinc=0 })

---

1. 왜 이렇게 동작하나요?

리액트에서는 JSX를 사용하여 컴포넌트를 호출할 때, 태그 속성으로 전달된 값을 props 객체로 전달합니다.

즉:

<GradeItem name="철수" level={1} sex="남자" kor={98} eng={78} math={88} sinc={64} />

이 코드는 GradeItem 컴포넌트를 호출하면서 아래와 같은 props 객체를 전달하는 것과 같습니다:

props = {
    name: "철수",
    level: 1,
    sex: "남자",
    kor: 98,
    eng: 78,
    math: 88,
    sinc: 64
};​

---

2. 구조 분해 할당을 이용한 처리

GradeItem = ({ name, level, sex, kor=0, eng=0, math=0, sinc=0 })

위 코드는 props 객체를 구조 분해 할당하여, 각각의 값을 별도 변수로 꺼냅니다.
즉:

• name은 "철수"
• level은 1
• sex는 "남자"
• kor은 98
• eng은 78
• math은 88
• sinc은 64

만약 전달되지 않은 값이 있다면 기본값으로 초기화됩니다(예: kor=0).

---

3. 비유

만약 GradeItem이 아래와 같은 일반적인 함수라고 생각하면:

function GradeItem({ name, level, sex, kor = 0, eng = 0, math = 0, sinc = 0 }) {
    // 함수 내부에서 name, level 등 사용 가능
    console.log(name, level, sex, kor, eng, math, sinc);
}

이 함수에:

GradeItem({ 
    name: "철수", 
    level: 1, 
    sex: "남자", 
    kor: 98, 
    eng: 78, 
    math: 88, 
    sinc: 64 
});

이런 식으로 값을 전달하는 것과 동일합니다.

---

4. 결론

<GradeItem name="철수" level={1} sex="남자" kor={98} eng={78} math={88} sinc={64} />

• 이 코드는 GradeItem 컴포넌트에 props를 전달하는 방식입니다.
• GradeItem 내부에서는 props를 구조 분해 할당해서 name, level, sex, kor, eng, math, sinc라는 변수로 접근할 수 있습니다.
• 따라서, 아래 코드는 정확히 같은 동작을 합니다:

GradeItem = ({ name, level, sex, kor=0, eng=0, math=0, sinc=0 })

리액트가 자동으로 props 객체를 구조 분해하여 값을 각각의 변수에 매핑해주기 때문입니다.

(이 답변을 보고 멈췄어야 했어.....)

 

Q2.

<GradeItem key={0} name="철수" level={1} sex="남자" kor={98} eng={78} math={88} sinc={64} />

이렇게 입력하면,

GradeItem = ({ name, level, sex, kor=0, eng=0, math=0, sinc=0 })

이렇게 넘어가는 과정은 정리해줄 수 있어? 아니면 그렇게 연산하기로 약속이 된거야?

 

 

 

A2.

리액트에서 props가 컴포넌트로 넘어가는 과정은 리액트 내부의 동작 원칙에 의해 정해진 동작입니다. 이걸 더 깊이 이해하려면 "리액트가 어떻게 컴포넌트를 처리하고 데이터를 전달하는지"를 살펴볼 필요가 있습니다. 한 번 과정과 원리를 단계별로 정리해 드릴게요! 🌟

---

1. JSX 문법에서의 입력

<GradeItem 
    key={0}
    name="철수"
    level={1}
    sex="남자"
    kor={98}
    eng={78}
    math={88}
    sinc={64}
/>

이 JSX 문법은 리액트 컴포넌트 호출을 나타냅니다.
이 코드를 보면 GradeItem이라는 컴포넌트를 호출하면서, 속성(key, name, level, sex, ...)을 전달하고 있습니다.

---

2. 리액트가 JSX를 변환

리액트는 JSX를 컴파일해서 JavaScript 함수 호출 코드로 변환합니다.
위 코드는 사실 다음과 같이 동작합니다:

React.createElement(GradeItem, {
    key: 0,
    name: "철수",
    level: 1,
    sex: "남자",
    kor: 98,
    eng: 78,
    math: 88,
    sinc: 64
});

즉, React.createElement 함수는 컴포넌트를 호출할 때 사용되고, 전달된 속성들은 객체 형태로 묶여 GradeItem 컴포넌트로 전달됩니다.

---

3. React.createElement에서 props 객체 생성

React.createElement 함수는 아래처럼 동작합니다:

1. 컴포넌트 타입 (GradeItem)과 함께, 전달된 속성들을 props 객체로 만들어 컴포넌트로 전달.
2. 이 과정에서, JSX 속성들이 모두 하나의 props 객체로 변환됩니다:

props = {
    key: 0,
    name: "철수",
    level: 1,
    sex: "남자",
    kor: 98,
    eng: 78,
    math: 88,
    sinc: 64
};

---

4. 컴포넌트 호출

리액트는 GradeItem 컴포넌트를 호출하면서, 이 props 객체를 전달합니다.

즉, 리액트는 GradeItem을 아래처럼 호출하는 것과 같습니다:

GradeItem({
    key: 0, // 이 값은 props 객체의 일부가 아니며 리액트가 내부적으로 관리
    name: "철수",
    level: 1,
    sex: "남자",
    kor: 98,
    eng: 78,
    math: 88,
    sinc: 64
});

---

5. 컴포넌트 내부에서 구조 분해 할당

GradeItem 컴포넌트의 함수 정의는 이렇게 되어 있습니다:

const GradeItem = ({ name, level, sex, kor = 0, eng = 0, math = 0, sinc = 0 }) => {
    ...
};

이 함수는 전달된 props 객체를 구조 분해 할당해서 각각의 속성들을 변수로 꺼냅니다.

• name → props.name 값("철수")
• level → props.level 값(1)
• sex → props.sex 값("남자")
• kor → props.kor 값(98)
• 기본값(kor=0)은 전달된 값이 없을 때만 적용됩니다.

---

6. 리액트의 약속된 동작

이 과정은 리액트 내부에서 정해진 동작 규칙입니다.

1. JSX 변환: JSX → React.createElement로 변환.
2. props 객체 생성: 속성들이 props 객체로 묶임.
3. 컴포넌트 호출: 리액트가 props를 함수형 컴포넌트에 전달.
4. 구조 분해 할당: 컴포넌트에서 props 객체를 사용 가능.

---

7. "약속된 연산"의 의미

리액트에서 JSX와 props는 이미 정의된 방식으로 동작합니다. 개발자가 별도로 "구현"하지 않아도 리액트는 컴포넌트 호출 시 다음 과정을 항상 수행합니다:

1. JSX → React.createElement 변환.
2. 속성 → props 객체로 묶임.
3. props 객체 → 컴포넌트에 전달.

따라서, **"약속된 동작"**으로 이해할 수 있습니다.

---

8. 결론

<GradeItem 
    name="철수"
    level={1}
    sex="남자"
    kor={98}
    eng={78}
    math={88}
    sinc={64}
/>

• 이 코드는 리액트 내부적으로 props 객체를 생성하여 GradeItem에 전달합니다.
• GradeItem = ({ name, level, sex, kor=0, eng=0, math=0, sinc=0 })는 구조 분해 할당으로 전달받은 props 객체를 간편하게 다루는 방식입니다.
• 이 모든 과정은 리액트가 약속한 방식으로 동작합니다. 개발자가 별도로 처리하지 않아도 리액트가 자동으로 해줍니다.

 

 

 

결론: 즉, 어느정도는 받아들이고 넘어가야 할 부분이라는거...