-
카테고리
-
세부 분야
풀스택
-
해결 여부
미해결
rendering 영역의 <div>와 return 영역의 <div> 차이 질문드립니다
21.03.04 10:05 작성 조회수 132
0
선생님 안녕하세요
완강하고 선생님과 진행한 쇼핑몰에 개인적으로 기능을 더하는 중인데 궁금한 부분이 생겼습니다
서치를 해봤는데 제가 원하는 답변을 찾을 수가 없어서 이렇게 질문드립니다
①
...
const Tab = () => (
<Tabs type="card" activeKey={ActiveTab} onChange={onChange}>
<TabPane tab="배송지 선택" key="1">
<div>
...
</div>
</TabPane>
<TabPane tab="신규입력" key="2" forceRender="true">
<div>
<RecipientDiv>
<Input placeholder="수령인" value={Recipient} onChange={onRecipientChange} />
<Input placeholder="'-'를 제외하고 입력해 주세요" value={PhoneNumber} onChange={onPhoneChange} />
</RecipientDiv>
<PostcodeDiv>
<div>
<Input placeholder="우편번호" value={Postcode} readOnly />
<Button onClick={showModal} size="default">주소 찾기</Button>
</div>
<Modal title="Basic Modal" visible={ShowModal} onOk={closeModal} onCancel={closeModal}>
<DaumPostcode onComplete={handleComplete} />
</Modal>
<Input placeholder="주소" value={Address} readOnly/>
</PostcodeDiv>
<Input placeholder="상세주소" value={DetailAddress} onChange={onAddressChange} />
<Checkbox onChange={onCheckChange} checked={Check}>배송지 목록에 추가</Checkbox>
</div>
</TabPane>
</Tabs>
);
}
return (
<div>
<Tab />
</div>
)
②
return (
<div>
<Tabs type="card" activeKey={ActiveTab} onChange={onChange}>
<TabPane tab="배송지 선택" key="1">
<div>
...
</div>
</TabPane>
<TabPane tab="신규입력" key="2" forceRender="true">
<div>
<RecipientDiv>
<Input placeholder="수령인" value={Recipient} onChange={onRecipientChange} />
<Input placeholder="'-'를 제외하고 입력해 주세요" value={PhoneNumber} onChange={onPhoneChange} />
</RecipientDiv>
<PostcodeDiv>
<div>
<Input placeholder="우편번호" value={Postcode} readOnly />
<Button onClick={showModal} size="default">주소 찾기</Button>
</div>
<Modal title="Basic Modal" visible={ShowModal} onOk={closeModal} onCancel={closeModal}>
<DaumPostcode onComplete={handleComplete} />
</Modal>
<Input placeholder="주소" value={Address} readOnly/>
</PostcodeDiv>
<Input placeholder="상세주소" value={DetailAddress} onChange={onAddressChange} />
<Checkbox onChange={onCheckChange} checked={Check}>배송지 목록에 추가</Checkbox>
</div>
</TabPane>
</Tabs>
</div>
)
①로 했을 때는 위 gif에서처럼 TabPane 내에 있는 Input에서 onChange가 발생하면 Input에서 포커스가 아웃됩니다
Tab을 다시 렌더링하는 느낌입니다...!
②로 수정했더니 이 문제가 해결됐고
①에서 <Tab />을 {Tab()}으로 수정하니 해결됐습니다
①에서 문제가 발생한 이유와 ①과 ②의 차이를 알고 싶습니다ㅠㅠ
답변 기다리겠습니다 선생님
답변을 작성해보세요.
답변 0