해결된 질문
24.02.22 14:39 작성
·
285
·
수정됨
1
안녕하세요 선생님 질문이 있습니다.
<Button whatelse={"will"}>주문하기 , 결제하기</Button>
---
const Button = ({ whatelse }) => (
<button className="Button brand">{whatelse}</button>
);
export default Button;
children처럼 제가 따로 설정해주지도 않았는데 기본적으로 생성된 props들은 뭐라고 부르나요?
const Button = ({ styleType, block, ...rest }) => {
let className = "Button";
if (styleType) className += ` ${styleType}`;
if (block) className += ` block`;
return <button className={className} {...rest}></button>;
};
export default Button;
또한 강의 후반에 ...rest로 children, onClick props 를 퉁치는데 이떄 children props 내용이 return하는 button element에 {children} 이렇게 들어있지 않아도 잘 렌더링이 되던데 이것은 뭐라 부르나요?
답변 2
3
2024. 02. 23. 08:36
Button 컴포넌트를 JSX 문법으로 사용할 때 Button 함수에 인자를 전달하는 방법은 두가지 입니다.
어트리뷰트
태그 안
whatelse가 1번 방식이고요. “주문하기 , 결제하기” 문자처럼 태그 안에 전달하는 것이 2번 방식입니다.
1번은 인자 이름을 직접 지정해서 전달하고 2번 방식은 chidlren이란 이름으로 컴포넌트에 전달됩니다.
JSX 코드를 JS 코드로 변환하면 이렇게 됩니다.
createElement(
Button, // 함수
{ whatelse: "will" }, // props
"주문하기 , 결제하기" // children
)
결과를 보고 유추해 보면 React.createElement 함수가 컴포넌트의 props 인자에 chidlren까지 병합해 전달하는 걸 알 수 있습니다.
--
children은 1번 방식으로도 전달할수 있어요.
<Button whatelse={will} children={‘주문하기, 결제하기’} />
JS로 변환하면 이렇게 되거에요.
createElement(
Button,
{
whatelse: "will",
children: "주문하기 , 결제하기" // children
},
)
2024. 02. 25. 15:53
reset이 아니라 rest 인자를 말씀하신것 같은데요.
rest 객체에 children 속성이 포함되어 있을 겁니다. 이 값을 Button의 props 인자로 전달한 것은 props.children = rest.children 으로 값을 할당한 것과 같은 결과입니다.
이미 말씀드렸듯이 children을 지정하는 방법 1번에 해당하는 효과입니다.
1
안녕하세요, 인프런 AI 인턴입니다.
do현님의 질문은 리액트 컴포넌트에서 예상하지 않은 추가적인 props
가 기본적으로 생성되는 이유를 궁금해하시는 것으로 보입니다. 리액트에서 children
과 같은 특별한 props는 컴포넌트에 전달된 하위 요소들을 나타냅니다. 예를 들어, Button
컴포넌트 내부에 포함된 텍스트 또는 엘리먼트들은 자동으로 children
props로 처리됩니다. 즉, ‘기본적으로 생성된 props’들을 특별한 props 또는 기본 props라고 부를 수 있으며, children
은 이러한 기본 props 중 하나입니다.
질문자님이 제시한 소스 코드에서 <Button>
컴포넌트는 whatelse
이라는 명시적인 props 외에도 내부의 ‘주문하기 , 결제하기’ 텍스트가 children
props로 자동으로 전달되고 있습니다. children
은 질문자님이 별도로 설정하지 않아도 컴포넌트 내부에 포함된 콘텐츠에 의해 자동으로 생성됩니다.
제공된 답변과 비슷한 질문에 대한 답변으로, 리액트의 props
와 children
에 대해 좀 더 자세히 알고 싶으시다면 다음의 답변을 참조하시길 추천드립니다:
- React 컴포넌트에서의 props 사용법 관련: ”[구현하기 1] SearchForm 1 강의 중 질문있습니다.”
- 클래스형과 함수형 컴포넌트의 차이 및 동작 원리에 대한 설명: “클래스형 컴포넌트”
React 공식 문서에서는 props에 대해 좀 더 자세히 설명하고 있으니, 이 자료도 참고하실 수 있습니다.
저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.
2024. 02. 23. 12:18
답변감사합니다.
제가 중간에 질문을 수정하여서 추가적으로 reset 관련된 부분도 질문하였는데 이 부분도 답변해주시면 안될까욤..?