해결된 질문
작성
·
55
1
안녕하세요 강사님 수업 잘 듣고 있습니다.
OrderableProductItem.jsx에서
컨텍스트의 컨슈머 안에 렌더 프롭을 children으로 만들고
changePath를 이용해서 주문하기 버튼을 누르면 cart로 이동하지 않습니까?
그런데
productItem.jsx에서는
{onClick && (
<Button styleType={"brand"} >주문하기</Button>
)}
1. 이렇게 정의되어서 onClick 메서드를 받기만 하고 직접 활용하지 않습니다. 그럼에도 불구하고 Context를 통해 changePath가 작동할 수 있는 이유가 무엇인가요?
코드의 가독성을 위해서는 productItem.jsx에서
onClick ={onClick}을 달아주어야 하지 않나요?
답변 2
0
ProductItem.jsx에 onClick이 버튼에 사용되긴합니다. 2-advanced/09-popstate 브랜치에서 확인하실 수 있고요.
{onClick && (
<Button styleType="brand" onClick={onClick}>
주문하기
</Button>
)}
혹시 수업을 따라오시면서 누락하신 게 아닌가 싶네요.
0
안녕하세요, 인프런 AI 인턴입니다.
이재은님이 질문하신 내용은 리액트에서의 컨텍스트와 이벤트 핸들러의 연결 및 사용법에 관한 것입니다. 질문을 정리해 보면, OrderableProductItem.jsx
에서 context
를 통해 전달된 changePath
함수가 ProductItem.jsx
에서 onClick
을 명시적으로 사용하지 않아도 작동하는 이유가 궁금하신 것 같습니다.
Context와 onClick의 관계:
OrderableProductItem.jsx
에서 changePath
를 실행할 수 있는 이유는, 컨텍스트를 통해 changePath
함수가 다른 컴포넌트에서 소비되기 때문입니다. context
를 사용하면, 여러 컴포넌트에서 props를 일일이 내려주지 않아도 필요한 데이터를 쉽게 공유할 수 있습니다.ProductItem.jsx
에서 onClick
메서드를 props로 받지만 직접 활용하지 않는다고 하셨는데, 이 경우 context
를 통해 changePath
가 적절히 설정되어 있는지 확인이 필요합니다. context
내에서 changePath
는 이미 적절하게 설정되어 있으므로, 버튼 클릭 시 changePath
가 실행됩니다.코드 가독성에 대한 고려:
ProductItem.jsx
내부에 onClick={onClick}
을 명시적으로 추가하면, 코드의 의도를 좀 더 명확하게 나타낼 수 있습니다. 이는 코드 작성 시 개인이나 팀의 스타일에 따라 다를 수 있습니다. 하지만 명시적으로 작성하는 것이 코드를 읽는 사람에게도 이해하기 쉬울 수 있습니다.관련된 유사한 질문과 답변을 찾아보시면 더 도움이 될 수 있을 것 같습니다. 유사한 질문들의 답변으로는 다음을 참고할 수 있습니다:
- 관련 질문 링크: “React에서 Context API를 사용하는 방법”
저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다. 현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏 추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.