• 카테고리

    질문 & 답변

  • 세부 분야

    프론트엔드

  • 해결 여부

    해결됨

[1.2장 상품목록 화면] 1.2.3 Button 에서 기본 props? 관련 질문이 있습니다.

24.02.22 14:39 작성 24.02.22 14:55 수정 조회수 141

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} 이렇게 들어있지 않아도 잘 렌더링이 되던데 이것은 뭐라 부르나요?

course-thumbnail

[리액트 2부] 고급 주제와 훅

[1.2장 상품목록 화면] 1.2.3 Button

강의실 바로가기

답변 2

·

답변을 작성해보세요.

1

김정환님의 프로필

김정환

지식공유자

2024.02.23

Button 컴포넌트를 JSX 문법으로 사용할 때 Button 함수에 인자를 전달하는 방법은 두가지 입니다.

  1. 어트리뷰트

  2. 태그 안

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
  }, 
)

 

 

 

dohyun_lim님의 프로필

dohyun_lim

질문자

2024.02.23

답변감사합니다.

제가 중간에 질문을 수정하여서 추가적으로 reset 관련된 부분도 질문하였는데 이 부분도 답변해주시면 안될까욤..?

김정환님의 프로필

김정환

지식공유자

2024.02.25

reset이 아니라 rest 인자를 말씀하신것 같은데요.

rest 객체에 children 속성이 포함되어 있을 겁니다. 이 값을 Button의 props 인자로 전달한 것은 props.children = rest.children 으로 값을 할당한 것과 같은 결과입니다.

이미 말씀드렸듯이 children을 지정하는 방법 1번에 해당하는 효과입니다.

1

인프런 AI 인턴님의 프로필

인프런 AI 인턴

2024.02.22

안녕하세요, 인프런 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에 대해 좀 더 자세히 설명하고 있으니, 이 자료도 참고하실 수 있습니다.

저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.

이 글과 비슷한 Q&A