1. 문제 상황

제작 중인 토이 프로젝트에 이메일 인증 기능이 있다.

서버 응답 수신 전

서버 응답 수신한 후

인증 과정에 필요한 컴포넌트의 모습이다.

이 컴포넌트는 꽤 많은 props를 필요로 한다.

• 사용자가 입력한 이메일
• 서버로 인증 코드 발송을 요청하는 함수
• 서버로부터 응답을 받았는지 여부와 그 setter
• 서버로부터 받은 응답의 성공/실패 여부
• 인증 코드 만료까지 남은 시간(추정치)과 그 setter
• 이메일 인증 완료 여부의 setter
• 모달 열림 상태의 setter

이중 일부는 컴포넌트 레벨에서 관리할 수도 있었지만. 동일한 상태를 페이지의 다른 컴포넌트들이 참조해야 해서 페이지 레벨에서 관리할 수밖에 없었다. 문제는 여기서 발생.

비밀번호 재발급 기능에서 이 컴포넌트를 재사용해야 할 필요가 생긴 것

다른 페이지에서 이 컴포넌트를 재사용하기 위해선, 위에 명시한 상태와 함수들을 해당 페이지에도 동일하게 선언하고 전부 props로 전달해야 한다.