Props로 값을 넘겨줄 때 파라미터명은?

Q1.

Comp1 으로 정의된 컴포넌트가 받는 props의 파라미터 명이 aaa, bbb, ccc 이며, aaa는 해당 컴포넌트의 height 속성, bbb는 width 속성, ccc는 z-index 속성에 대한 값이라고 하자. 이때, Comp1을 import해서 사용하는 파일 JSJS.js에서, Comp1에 height 속성값으로 100을 주고 싶다고 하면, JSJS.js 에서는, <Comp1 height={100} /> 라고 작성을 해야하나? 아니면 <Comp1 aaa={100} /> 이라고 작성해야하나? 내가 한 질문 과정중에, props가 주고 받는 과정에 대해서 추가적으로 같이 설명하면서 물어봐야 할 부분이 있다면 지적도 해줘.

 

 

 

A1.

ChatGPT의 말:

 

좋은 질문이에요! 주어진 설명을 기반으로 대답하자면, <Comp1 aaa={100} /> 라고 작성해야 합니다. 이유는 Comp1이 받는 props의 이름이 aaa, bbb, ccc로 정의되어 있기 때문입니다. 이러한 이름들은 부모 컴포넌트에서 Comp1으로 전달되는 값의 키(key)로 작용하며, aaa가 Comp1 내부에서 height 속성으로 활용될 뿐이지, 부모에서 props 이름을 height로 사용할 수는 없습니다.

props 전달 과정 설명

1. Comp1 내부에서의 props 사용:

• Comp1 컴포넌트는 props라는 객체를 통해 전달된 값을 받습니다.
• props.aaa는 컴포넌트의 height 속성으로 사용되고,
• props.bbb는 width 속성으로,
• props.ccc는 z-index 속성으로 매핑되어 사용된다는 점을 알 수 있습니다.

function Comp1(props) {
    return (
        <div style={{ 
            height: props.aaa, 
            width: props.bbb, 
            zIndex: props.ccc 
        }}>
            Content
        </div>
    );
}

 

2.부모 컴포넌트에서 props 전달: 부모 컴포넌트는 Comp1의 props 이름을 기반으로 값을 전달합니다. 따라서 Comp1의 props 이름이 aaa, bbb, ccc로 정의되어 있으므로, 부모는 이 키를 사용해 값을 넘겨야 합니다.

import Comp1 from './Comp1';

function ParentComponent() {
    return (
        <Comp1 aaa={100} bbb={200} ccc={10} />
    );
}

 

3. 결론: Comp1에서 aaa라는 이름으로 정의된 props가 height 속성에 매핑되었다면, 부모 컴포넌트에서 height를 100으로 설정하려면 <Comp1 aaa={100} />라고 작성해야 합니다.

---

추가적으로 질문에 대해 고려할 점:

props의 전달 과정에 대해 더 명확히 하려면 다음과 같은 질문을 추가로 던져볼 수 있어요:

 

1. props 명명 규칙:

• aaa, bbb, ccc라는 이름은 컴포넌트 내부에서 어떤 속성으로 매핑되는지 명시적으로 알려주지 않아요. 만약 Comp1을 다른 개발자가 사용할 경우, props 이름만 보고 어떤 용도로 쓰이는지 이해하기 어렵습니다.
• 이런 경우, props 이름을 명확하게 바꾸는 것이 좋습니다. 예를 들어 height, width, zIndex처럼 명명하면, 사용자 입장에서 훨씬 직관적입니다.

function Comp1({ height, width, zIndex }) {
    return (
        <div style={{ height, width, zIndex }}>
            Content
        </div>
    );
}

부모 컴포넌트에서 사용할 때도 더 직관적으로 작성할 수 있습니다:

<Comp1 height={100} width={200} zIndex={10} />

 

2. defaultProps 또는 PropTypes 사용:

• props에 기본값을 설정하거나, 전달된 값이 적합한지 검증하는 방법을 추가적으로 생각해볼 수 있습니다.
• 예를 들어, Comp1이 반드시 aaa, bbb, ccc를 받아야 하거나, 특정 타입만 받아야 한다면 이를 명시할 필요가 있습니다.

Comp1.propTypes = {
    aaa: PropTypes.number.isRequired,
    bbb: PropTypes.number.isRequired,
    ccc: PropTypes.number
};

Comp1.defaultProps = {
    ccc: 1 // 기본 zIndex 값
};

---

결론적으로, 질문에서 props가 내부에서 어떻게 사용되는지, 어떤 이름으로 정의되어 있는지를 명확히 이해하고, props의 이름을 어떻게 설계할지 고민하는 것이 중요합니다. "props 이름이 실제 매핑되는 속성과 동일한가요?" 같은 질문을 추가로 고려해 보면 좋겠습니다.

 

 

 

Q2.

나의 말:

마지막에 네가 제안한, props 이름이 실제 매핑되는 속성과 동일한가요? 에 대한 대답은,

그렇지 않다, 하지만 속성에 대한 설명을 해줄 수 있는 이름을 주는 것이 좋다.

내가 물어본 질문을 이용해보자면,

 

props로 받을 값과 그 값이 이어질 속성을 설정 할 때, width={width}, height={height},z-index={zIndex} 가 되지 않을까?

 

 

 

A2.

ChatGPT의 말:

 

네, 맞아요! 당신이 제안한 대로 **width={width}, height={height}, z-index={zIndex}**처럼 props 이름을 명확하게 설정하면 더 직관적이고 관리하기 쉬운 컴포넌트를 만들 수 있습니다.

현재의 상황에서 제안한 방법을 적용해 보면 다음과 같이 정리할 수 있습니다:

1. props 이름과 컴포넌트 속성 매핑

지금의 컴포넌트는 props 이름(aaa, bbb, ccc)이 실제 속성(height, width, z-index)과 명확히 연결되지 않아 직관성이 떨어집니다. 이런 경우, props의 이름을 의미 있는 이름으로 바꾸면 더 좋습니다.

function Comp1({ height, width, zIndex }) {
    return (
        <div style={{ 
            height: height, 
            width: width, 
            zIndex: zIndex 
        }}>
            Content
        </div>
    );
}

위 코드에서 props 이름이 **height, width, zIndex**로 정의되었고, 이 이름들이 HTML/CSS 속성과 자연스럽게 매핑됩니다.

2. 부모 컴포넌트에서의 사용

이제 부모 컴포넌트에서 사용하는 방법도 훨씬 더 직관적입니다:

import Comp1 from './Comp1';

function ParentComponent() {
    return (
        <Comp1 height={100} width={200} zIndex={10} />
    );
}

이렇게 작성하면 컴포넌트를 사용하는 사람이 각 props의 목적을 바로 이해할 수 있습니다. 별도의 문서나 주석 없이도 props의 의미가 명확하죠.

---

3. 질문에 대한 추가 확인

질문에서 말한 "props로 받을 값과 그 값이 이어질 속성을 설정할 때, width={width}, height={height}, z-index={zIndex}"는 매우 적절한 방향입니다.

하지만 여기서 한 가지 더 개선할 수 있는 점은 JavaScript의 단축 속성명(shorthand property)입니다:

function Comp1({ height, width, zIndex }) {
    return (
        <div style={{ height, width, zIndex }}>
            Content
        </div>
    );
}

 

height: height, width: width처럼 반복하지 않고, 한 번만 작성하면 됩니다. 이 방법은 컴포넌트가 더 간결해지고 가독성이 향상됩니다.

---

4. 요약

• props 이름은 의미가 명확하고 속성에 대한 설명을 담아야 합니다.
• 예를 들어 width={width}, height={height}, z-index={zIndex}처럼 이름을 정하면 직관적입니다.
• 이 방식은 컴포넌트를 읽고 사용하는 사람 모두에게 더 큰 가치를 제공합니다.

이러한 명명 규칙을 준수하면, 팀 프로젝트에서 코드 품질이 크게 향상될 거예요! 😊

 

 

 

결론

Props로 넘겨줄 값이 있는 컴포넌트(Comp1이라고 가정)를 import 해와서 사용중에 props 값을 넣어주어야 하는 경우,

해당 컴포넌트에서 설정된 속성의 파라미터명으로 전달해야 한다.

 

ex)

Comp1이 쓸 width 값을 props에서 {aaa} 로 받는다면,

해당 Comp1을 import해와서 쓰는 코드에서는,

props 값을 주기 위해서, <Comp1 aaa={height로 쓸 값} /> 꼴로 작성해야 한다는 것.