이제 이 Results 데이터를 도출해봅시다
이를 위해 당연히
저는 이 calculateInvestmentResults 함수를 이용할 것입니다
이것은 제가 investment.js 파일에서 여러분에게 제공합니다
따라서 여기 Results.jsx 에서는
우리는 최종적으로 우리의 결과를
이 input 속성으로부터 불러올 수 있습니다
그것은 결과적으로 당연히 이 userInput 상태입니다
따라서 우리는 우리의 결과를 이 상태로부터 도출할 수 있습니다
그리고 여러분이 전에 배웠듯이
값을 도출하고, 상태를 기반으로 값을 계산하는 것은
여러분이 리액트에서 많이 할 것입니다
따라서 여기 Results 컴포넌트에서
저는 이 calculateInvestmentResults 함수를 활용할 것입니다
이것은 반드시 다음과 같이
util/investment.js 로부터 import 되어야 합니다
그리고 이 investment results를 계산하기 위하여
우리는 여기서 input을 전달해야 합니다
왜냐하면 이 input이 적어도 이 앱에서는
객체이기 때문이고
제가 예상하는 모양은 이렇습니다
만약 여러분이 여러분의 상태를 다르게 관리하거나
혹은 여러분의 userInput 상태에서
다른 속성 이름을 사용한다면
당연히 먼저 input 객체를 변형하거나
여기 모양을 가진
새로운 userInput 객체를 생성해야 합니다
그러나 여기 저의 상황에서는 제가 이 app 컴포넌트에서 관리하고 있는
userInput의 상태가
이미 올바른 모양을 가지고 있습니다
따라서 저는 단지 calculateInvestmentResults 로 다음과 같이
이 속성 값을 전달하면 됩니다
이로써, 저는 여기 저의 results 데이터를 얻고
그리고 일단은 이 컴포넌트에서
console.log(resultsData)를 하여 우리가 해당 결과를
살펴볼 수 있도록 하겠습니다
이것을 저장하고 콘솔을 열고 그리고 다시 로딩한다면
개발자 툴에서
저는 인덱스 0에서 시작하는 10개의 요소를 가진 배열을 얻습니다
여러분이 볼 수 있듯이 이 10개 요소는
10개의 서로 다른 년도입니다
그리고 여기서 여러분은 각각의 해마다
그 해에 투자된 금액을 볼 수 있고
이 금액은 당연히 매년 동일합니다
왜냐하면 간단히 여기 이 금액이기 때문입니다
하지만 그 주어진 해에 얻은 이자가 또 있습니다
이것은 다른 해마다 서로 다릅니다
그리고 한 해의 최종
투자의 값이 있습니다
그것은 단순히 저의
초기 투자액 더하기 연간 투자액 더하기 얻은 이자입니다
당연히 이전 년도에서 얻은 이자도 포함입니다
따라서 그것이 저의 investment(투자) 데이터 입니다
이것을 지우고 예를 들어
initial investment(초기 투자액)을 변경한다면
여러분은 이것이 다시 계산되는 것을 볼 수 있습니다
그러나 여기에서
이상한 에러가 뜨는 것 또한 보실 수 있습니다
interest (이자) 값이 이상하게 보입니다
valueEndofYear 또한 마찬가지입니다
그리고 어떤 특정 시점으로부터는
interest 값으로 숫자가 아니라는 뜻의 NaN를 얻습니다
문제가 무엇일까요?
여기서 문제는 자바스크립트에서 input 필드의 값을 가져올 때
이 경우에는 initialInvestment input 필드를
예로 들 수 있지만 여러분이 input 필드의 값을 얻을 때
사실은 모든 입력 필드에서 여기에서처럼 추출하면
여기에서처럼 추출하면
항상 문자열이라는 것입니다
여러분이 여기서 숫자로 타입을 지정하더라도
이것은 여러분이 자바스크립트에서 얻는
값의 타입에 영향을 미치지 않습니다
대신에 여러분은 항상 문자열 타입의 값을 얻을 것입니다
그리고 이것이 여기 calculateInvestment 함수에서
문제인 것입니다
왜냐하면 여기서 결국 저는 수학적인 계산을
문자열로 실행하는 것이기 때문입니다
계산에서 + 연산자를 사용하고
그 값 중 하나가 문자열일 때
자바스크립트는 두 개의 숫자를 더하기 위해
+ 연산자를 사용하는 것이 아닌
두 개의 값을 새로운 문자열로
이을 것입니다
이것은 다음과 같이 결국은 숫자가 아닌
단순히 이어져만 있는 문자열로
이렇게 엄청나게 긴 숫자를 만드는 것입니다
그리고 여러분은 그것을 여기 첫 번째 년도인 year 1 에서 볼 수 있습니다
여기서 결국은 이것은 15000 이라는
저의 initial investment (초기 투자액)과
annual investment(연간 투자액) 그리고 여기 얻은 interest (이자)인
2100이라는 숫자를 결합한 것입니다
따라서 이것은 결국 숫자로 다뤄지지 않고
대신에 문자열로서 이어져있는 두 가지 숫자인 것입니다
이것이 여기서 문제입니다
애플리케이션 내의 버그입니다
이 에러를 고치기 위해
우리는 우리가 유저로부터 입력된 값을 저장하는
app 컴포넌트로 돌아가야 합니다
그리고 우리는 단순히 새로운 값 앞에 + 를 추가해야 합니다
왜냐하면 여기서 +를 추가함으로서
문자열 값을 숫자 값으로 변환할 것을
강제하기 때문입니다
이 단순한 수정을 통해
이제 여러분이 다시 로딩하고 여기서 investment를 변경하면
버그가 사라진 것을 볼 수 있고
여기서 제대로 된 숫자를 얻는 것을 볼 수 있습니다
이로써 우리는 이제 이 results 컴포넌트에서
우리의 Results 를 얻게 됩니다
그리고 다음 단계로는 이 Results 를
테이블에 출력하겠습니다