Calendar & DatePicker

해당 포스트는 제로베이스 오프라인스쿨 진행 과정 중 React PairProgramming과제를 진행하며 회고를 정리하는 글이다.

 

- 현상

DatePicker 컴포넌트를 2개 이상일 때 각각의 DatePicker(Input 영역)를 클릭 시 다른 Calendar가 비활성화 되는 현상이 발생함.

const App = () => (
  <>
    <Title />
    <DatePicker />
    <DatePicker />
  </>
);

  

 

- 발견

 DatePicker마다 독립적으로 Calendar를 유지하기 위해서 Container에 이벤트 전파 방지 처리를 하였다.

<Container ref={containerRef} onClick={e=>e.stopPropagation()}>
  <TextInput readOnly ref={InputRef} placeholder={'Select date'} onClick={handleClick} />
  {showCalendar && <Calendar calendarSize={300} selectedDate={selectedDate} handleSelectDate={handleSelectDate} />}
</Container>

    

- 배운점 및 선언

window에 이벤트를 등록할 때는 각 컴포넌트에서 발생하는 이벤트 전파를 window에서 캐치하기 때문에 그 부분을 고려하여 코드를 작성해야 함을 배웠다.

window에 이벤트를 등록하는 경우가 같이 특수한 경우일 때 이벤트 전파를 신경 쓰며 코드를 작성해야겠다.