채널톡 아이콘

인프런 커뮤니티 질문&답변

이재은님의 프로필 이미지

작성한 질문수 11

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

[2.3장 라우터 2] 2.3.5 프로그래밍적으로 주소변경(풀이)

ProductItem에서 onClick = {onClick}을 달지 않아도 되는 이유

해결된 질문

작성

·

55

1

안녕하세요 강사님 수업 잘 듣고 있습니다.

 

OrderableProductItem.jsx에서

컨텍스트의 컨슈머 안에 렌더 프롭을 children으로 만들고

changePath를 이용해서 주문하기 버튼을 누르면 cart로 이동하지 않습니까?

그런데

productItem.jsx에서는

{onClick && (

<Button styleType={"brand"} >주문하기</Button>

)}

1. 이렇게 정의되어서 onClick 메서드를 받기만 하고 직접 활용하지 않습니다. 그럼에도 불구하고 Context를 통해 changePath가 작동할 수 있는 이유가 무엇인가요?

  1. 코드의 가독성을 위해서는 productItem.jsx에서
    onClick ={onClick}을 달아주어야 하지 않나요?

답변 2

0

김정환님의 프로필 이미지
김정환
지식공유자

ProductItem.jsx에 onClick이 버튼에 사용되긴합니다. 2-advanced/09-popstate 브랜치에서 확인하실 수 있고요.

        {onClick && (
          <Button styleType="brand" onClick={onClick}>
            주문하기
          </Button>
        )}

 

혹시 수업을 따라오시면서 누락하신 게 아닌가 싶네요.

0

인프런 AI 인턴님의 프로필 이미지

안녕하세요, 인프런 AI 인턴입니다.

이재은님이 질문하신 내용은 리액트에서의 컨텍스트와 이벤트 핸들러의 연결 및 사용법에 관한 것입니다. 질문을 정리해 보면, OrderableProductItem.jsx에서 context를 통해 전달된 changePath 함수가 ProductItem.jsx에서 onClick을 명시적으로 사용하지 않아도 작동하는 이유가 궁금하신 것 같습니다.

  1. Context와 onClick의 관계:

    • OrderableProductItem.jsx에서 changePath를 실행할 수 있는 이유는, 컨텍스트를 통해 changePath 함수가 다른 컴포넌트에서 소비되기 때문입니다. context를 사용하면, 여러 컴포넌트에서 props를 일일이 내려주지 않아도 필요한 데이터를 쉽게 공유할 수 있습니다.
    • ProductItem.jsx에서 onClick 메서드를 props로 받지만 직접 활용하지 않는다고 하셨는데, 이 경우 context를 통해 changePath가 적절히 설정되어 있는지 확인이 필요합니다. context 내에서 changePath는 이미 적절하게 설정되어 있으므로, 버튼 클릭 시 changePath가 실행됩니다.
  2. 코드 가독성에 대한 고려:

    • 가독성 측면에서 ProductItem.jsx 내부에 onClick={onClick}을 명시적으로 추가하면, 코드의 의도를 좀 더 명확하게 나타낼 수 있습니다. 이는 코드 작성 시 개인이나 팀의 스타일에 따라 다를 수 있습니다. 하지만 명시적으로 작성하는 것이 코드를 읽는 사람에게도 이해하기 쉬울 수 있습니다.

관련된 유사한 질문과 답변을 찾아보시면 더 도움이 될 수 있을 것 같습니다. 유사한 질문들의 답변으로는 다음을 참고할 수 있습니다:
- 관련 질문 링크: “React에서 Context API를 사용하는 방법”

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