[GradeCalculator] TextField 컴포넌트의 error 속성 활용하기 (React js, Material UI)

현재 상황 위 화면은 현재까지 내가 구현한 학점 계산기 웹이다. 계산기의 과목명, 학점, 출석점수 등 모든 입력들은 Material UI의 TextField 컴포넌트를 사용하고 있다. 현재 계산기에는 학점을 정상적으로 계산하기 위해서 입력값에 대한 몇가지 유효 조건들이 존재한다. (과목명 중복 불가, 학점의 최소, 최대 점수 등) 그리고 위 유효성들에 대한 검사 로직은 이미 구현 되어있고, 저장 버튼을 눌렀을 때 유효 조건을 만족하지 않으면 예외처리 후 Alert를 띄우고 문제의 TextField로 focus하는 것까지 마친 상태이다. 목표 이번 포스팅에서 구현하고자 하는 것은 저장 버튼을 누르기 전에도 사용자가 잘못된 값을 입력했다는 것을 인지할 수 있도록 TextField의 error 속성을 이용하여..

2023.11.21