거의 마무리 된 이 앱에서
우리는 이 입력 영역을 가지고 있습니다
그리고 여기 아래 결과 테이블을 갖고 있습니다
그러나 이 앱은 아직 몇 가지의 문제점을 가지고 있습니다
가장 중요하게 제가 마이너스의 duration을 입력하면
제 앱은 에러 메세지와 함께 충돌합니다
혹은 duration을 0으로 바꾼다면
같은 일이 벌어집니다
우리는 음수의 투자 금액을 입력할 수도 있지만
여기서는 이로 인해
몇 년 동안 부채가 어떻게 변화하는지
계산할 수 있게 된다고 주장할 수도 있고
따라서 그것은 허용될 수도 있습니다
그러나 이 앱은 당연히 우리가 여기 0을 입력할 때
충돌하면 안됩니다
대신에 만약 우리가 이 입력 영역 아래에
에러 메세지들을 출력하게 된다면 더 좋을 것입니다
그리고 유저가 그들의 입력을 다시 바꿀 수 있도록 허용하는 것입니다
따라서 코드로 돌아와서
우리는 이 results 컴포넌트가
조건적으로 출력되도록 합니다
더 정확하게 하면, 이것은 우리가 유효한 유저 입력이
있을 경우만 출력되는 것입니다
물론 이 app 컴포넌트에서
이러한 유저 입력 상태를 기반으로
입력이 유효한지의 여부에 따라 정보를 가져오는
정보를 가져올 수 있는 새로운 상수나 변수를
간단히 추가할 수 있습니다
그리고 저는 이 상태 바로 아래에 그것을 실행하겠습니다
비록 기술적으로는 여러분이
이 app 컴포넌트 상에 어디에든 추가할 수 있지만
저는 관련 값들을 같이 유지하기 위해 이렇게 하겠습니다
여기서 저는 inputIsValid라는 이름의
새로운 상수를 추가하겠습니다
저에게는 굉장히 자세한 이름이라고 생각됩니다
그리고 이것은 유저의 입력이 유효한지 아닌지에 따라
true 혹은 false여야 합니다
이제 설명했듯이 여기 이 입력은 만약 duration이 최소 1이라면
유효해야 합니다
0이 아니어야 하고 음수가 아니어야 합니다
여기 있는 모든 다른 값들도
다른 것들을 계산할 수 있기에
음수 값이어도 상관없지만
duration 만큼은 양수의 값이도록 해야 합니다
당연히 여러분이 원한다면
다른 입력들에 대해서도 그들의 코드를 양수의 값으로 강제하여
이 앱을 편집할 수도 있습니다
그러나 여기서 저는 간단히 duration만 확인하고
따라서 inputIsValid는
userInput.duration 1과 같거나 크면 true여야 합니다
그게 여기 저의 조건입니다
그리고 이 조건이 부합하지 않는다면
inputIsValid는 false입니다
따라서 우리는 이제 inputIsValid를 활용하여
조건적으로 결과를 렌더링할 수 있습니다
여기서 간단히 inputIsValid를 추가하고
삼항표현식이나
&& 연산자를 사용하여
조건부로 이 결과 컴포넌트를 렌더링 할 수 있습니다
그리고 저는 입력이 유효하지 않다면
대체 응답을 보여주고 싶습니다
따라서 여기 우리는 만약 입력이 유효하지 않다면
'Please enter valid input data' (유효한 데이터를 입력해주세요)라는 paragraph를
출력하고자 합니다
혹은 더 자세하게
'please enter a duration greater than 0' (0보다 큰 기간을 입력해주세요) 라고 할 수도 있습니다
그리고 저는 이 paragraph에 className= center를 부여합니다
왜냐하면 이것이 제가 index.css 파일에서 정의한 클래스이고
이것이 더 좋아보이도록 만들 것입니다
이로써 다시 로딩한다면
저는 아직 저의 테이블을 볼 수 있고
입력을 바꿈으로서 확인할 수 있습니다
여러분은 제가 입력을 바꿀 때 테이블이
동적으로 다시 계산하는 것을 볼 수 있스빈다 그러나 만약 제가 duration을 1로 바꾸면
아직 작동하지만 0으로 바꾼다면
멈추는 것을 볼 수 있습니다
그리고 음수로 변경하여도 똑같이 멈추고
이 에러 메세지를 확인하게 됩니다
그러나 다시 양수로 돌아가면
다시 작동합니다
이제 이것은 마무리 된 앱입니다