챌린지에 대한 자세한 내용은 가이드를 참고하세요.
커스텀 훅을 제공하기로 했다. 토스트를 여러 개 띄우기 위해 컨테이너 역할을 하는 컴포넌트를 만들어 같이 제공했다. 처음에는 커스텀 훅 안에서 미리 렌더링을 해서 제공했다. 원하는 곳에 훅을 호출해서 가져다 쓰기만 하면 될 것으로 생각했던 것이다. 하지만 볼 수록 불편했다.
역할이 명확하지 않은 것이다. 훅은 데이터를 다루고, 컴포넌트에서 혹에서 제공하는 데이터를 가지고 렌더링을 하는것이 명확하지 않을까? 결국 코드를 수정했다. 훅을 통해 데이터를 가져오거나 조작하고, 컴포넌트를 정의하고 데이터를 제공해서 토스트 알림을 띄우도록 했다.
컴포넌트 여기저기서 토스트 알림을 추가하고 이를 하나의 컴포넌트에서 보여주려면 아직 부족하다. App 컴포넌트에서 훅을 호출하고 필요한 컴포넌트에 속성을 전달(Drilling)하기는 싫으니, Provider를 쓰기로 했다. App 컴포넌트를 프로바이더로 감싸고 토스트 알림 지속 시간인 duration만 속성으로 넣어주면 된다.
<ToastProvider duration={3000}>
<App />
</ToastProvider>
9주차 Dialog도 조만간 개선을 해야겠다.