Inflearn Community Q&A

선생님 안녕하세요

완강하고 선생님과 진행한 쇼핑몰에 개인적으로 기능을 더하는 중인데 궁금한 부분이 생겼습니다

서치를 해봤는데 제가 원하는 답변을 찾을 수가 없어서 이렇게 질문드립니다

①

...
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()}으로 수정하니 해결됐습니다 

①에서 문제가 발생한 이유와 ①과 ②의 차이를 알고 싶습니다ㅠㅠ

답변 기다리겠습니다 선생님