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

 

현재 상황

위 화면은 현재까지 내가 구현한 학점 계산기 웹이다.

 

계산기의 과목명, 학점, 출석점수 등 모든 입력들은 Material UI의 TextField 컴포넌트를 사용하고 있다.

 

현재 계산기에는 학점을 정상적으로 계산하기 위해서 입력값에 대한 몇가지 유효 조건들이 존재한다.

(과목명 중복 불가, 학점의 최소, 최대 점수 등)

 

그리고 위 유효성들에 대한 검사 로직은 이미 구현 되어있고, 저장 버튼을 눌렀을 때 유효 조건을 만족하지 않으면 예외처리 후 Alert를 띄우고 문제의 TextField로 focus하는 것까지 마친 상태이다.

 

 

목표

이번 포스팅에서 구현하고자 하는 것은 저장 버튼을 누르기 전에도 사용자가 잘못된 값을 입력했다는 것을 인지할 수 있도록 TextField의 error 속성을 이용하여 TextField의 색상을 바꿔 시각적으로 알려주는 기능이다.

 

 

 

코드

 

error 속성을 추가하기 전

 

  <TextField

      inputRef={courseRefs.current[index].name}

      inputProps={{ style: { textAlign: "left" } }}

      name="name"

      value={course.name}

      onChange={(e) => handleInputChange(e, index)}

  />

 

 

error 속성을 추가한 후

 

 

  <TextField

      inputRef={courseRefs.current[index].name}

      inputProps={{ style: { textAlign: "left" } }}

      name="name"

      value={course.name}

      error={

        courses

          .map((item) => item.name)

          .filter((element) => course.name === element).length >

          1 && course.name !== ""

          ? true

          : false

      }

      onChange={(e) => handleInputChange(e, index)}

  />

 

 

위 코드에서 error 속성안에는 삼항 연산자가 존재하는 것을 볼 수 있다.

 

삼항 연산자의 조건(과목명이 중복)이 참일 경우 error = true 로 설정되어 TextField에 빨간줄로 표시될 것이다.

 

이제 조건에 대한 설명을 하자면,

 

courses는 모든 과목들, 즉 모든 행이 담겨있는 배열이다. 그리고 course는 한 과목, 즉 한 행을 뜻하며 과목, 학점, 점수들에 대한 value들이 담겨있는 Object이다.

 

 

좀 더 이해하기 쉽도록 시각적으로 설명하자면 아래와 같다.

course1 = { name : "과목명1" , 학점 : 3, 출석점수 : 15, 과제점수 : 20, 중간고사 : 30, 기말고사 : 30};
course2 = { name : "과목명2" , 학점 : 2, 출석점수 : 10, 과제점수 : 20, 중간고사 : 20, 기말고사 : 30};
course3 = { name : "과목명3" , 학점 : 2, 출석점수 : 15, 과제점수 : 15, 중간고사 : 30, 기말고사 : 20};
course4 = { name : "과목명4" , 학점 : 3, 출석점수 : 20, 과제점수 : 20, 중간고사 : 15, 기말고사 : 30};

courses = [ course1, course2, course3, course4, ];

 

 

이제 조건문을 다시 살펴보면, courses 배열에 과목명들만을 추출하여 새로 배열을 만들고

그 배열에 현재 TextField에 입력한 과목명과 동일한 과목명의 개수가 1보다 크면 조건이 참이 되는 것을 볼 수 있다.

 

  courses

    .map((item) => item.name)

    .filter((element) => course.name === element).length >

    1 && course.name !== ""

 

 

 

조건이 `>= 1`이 아닌 ` > 1`인 이유는

 

TextField의 onChange 함수로 과목명을 입력하는 즉시 해당 과목명이 배열에 포함되어 있도록 구현해놓았기 때문이다.

  onChange={(e) => handleInputChange(e, index)}

 

 

이제 나머지 학점, 출석점수, 과제점수, 중간고사, 기말고사 TextField들에도 각각의 조건과 함께 error 속성을 삼항 연산자로 설정해두면 아래와 같은 결과를 볼 수 있다.

 

 

결과물

 

 

학점 계산기 Git 주소

djLee77/GradeCalculator (github.com)

GitHub - djLee77/GradeCalculator

 

직접 사용해볼 수 있는 배포된 웹 페이지

https://djlee77.github.io/grade-calculator/

React App

최근 레포지토리 이름 변경으로 인해 배포된 페이지의 url이 변경되어 일시적으로 404 에러가 발생했었고 현재 해결했습니다.