210727 개발 기록

21.07.27 의 개발 기록

📗  기획 요구안 

현재 탭의 상태가 '미전송' 일 때, '수탁기관'이 공백이면, 오른쪽의 전송 버튼이 비활성화 돼야 한다.

tab의 상태를 state 로 넘겨, 미전송일 땐 '전송'버튼의 disabled 프로퍼티를 true 로 설정했다.

쉽게 반영할 수 있는 기능이었지만, 곧 바로 단편적인 설계 임을 깨달았다.

 

❗️❗️  문제점

미전송 탭에서 수탁기관을 설정하면, 전송 버튼이 활성화 됨을 확인 할 수 있다.

문제는 전송/회신 탭을 클릭 후 다시 미전송 탭을 누르면, 수탁기관이 초기화 된다.

수탁기관이 초기화 된 상태(공백 상태) 일 땐 전송 버튼이 비활성화 돼야 하지만,

아래 이미지 처럼 여전히 활성상태의 전송 버튼을 볼 수 있었다. 

 

✅  느낀점과 해결안 

미전송 탭일 때 전송버튼을 disabled 시키는 것은 1차원적 사고라 느꼈다. 누구나 그 정도 기능은 만들 수 있다. 

Tab과 수탁기관의 상태값이 변경된 후,  다시 미전송 탭을 클릭해도,

'전송' 버튼의 disabled 프로퍼티가 true 로 유지되어야 한다.

 

단편적인 기능 개발을 넘어, 다양한 상황에서도 처음 기획한 바를 지킬 수 있는지 꼼꼼히 설계할 수 있어야한다고 생각했다. 다양한 경험 속에서 이런 현실적 경험치가 늘어갈 것이라 믿는다.

 

해결안은 tab과 수탁기관의 상태값을 useEffect() 의 deps 로 넣은 후, 렌더링 될 때마다 해당 값을 필터링 하여 전송 버튼의 disabled 프로퍼티를 제어하기로 했다.