이제 결과를 얻었으니
이제 콘솔에 올바른 결과를 출력하는 것 대신에
테이블에 그것을 출력해보고자 합니다
따라서 여기 results 컴포넌트 에서
우리는 html로 만들어진
테이블 요소를 출력해야 합니다
그리고 jsx로도 말입니다
이제 이 테이블은 result라는 id에 대한 값을 반환 받습니다
왜냐하면 이것이 우리가 css 파일에서 찾는 것이기 때문입니다
그 테이블에서 저는 하나의 테이블 줄을 (tr)
thead(테이블 헤드)에 추가하겠습니다
이것은 테이블의 서로 다른 열이나
다른 제목을 설정하기 위함입니다
각각의 결과가
어떤 연도인지를 알려주는
Year 열을 넣고자 합니다
우리는 Investment value 열이 있을 것이고
주어진 년도에 대한
Interest(이자)를 출력하는 열이 또 있을 것입니다
즉 그 년도에 번 이자입니다
또 하나의 열은 모든 년도에 총합해
얻은 Total Interest를 출력하는 곳입니다
그리고 마지막으로 또 하나의 열은
모든 년도에 대한 Invested Captial (투하 자본)을 출력하는 곳입니다
따라서 이게 제가 테이블에 넣고 싶은
다섯 가지의 열입니다
이제 아래 테이블 헤드에
우리는 tbody(테이블 바디)를 갖고 싶습니다
이것은 출력되어야 할 실제 데이터를
가진 실제 열들입니다
당연히 이 테이블에서 우리는 여러 개의 열을 가집니다
따라서 우리는 이 열들을 이전 과정에서 배웠듯이
results 데이터 배열을 기반으로 한 리스트로
동적이게 출력합니다
여기 테이블 바디에서
우리는 동적 값을 출력해야 하고
우리의 resultsData를 출력하고 싶습니다
여기는 우리가 calculateInvestmentResults와
함께 불러오는 배열입니다
따라서 여기 배웠듯이
우리는 map 메소드를 활용하여
이 데이터 배열을 jsx 요소로 가득찬 배열로 바꿀 수 있습니다
그리고 나서 이것은 리액트를 통해 스크린에 렌더링 될 수 있습니다
여기서 우리는 이 함수에서
매년 데이터를 얻고 이를 map 에 전달합니다
그리고 이 resultsData 배열에서
매 입력마다 실행됩니다
그리고 여기 저는 table row 요소를 반환하고 싶습니다
왜냐하면 그 tr 요소에서
td 태그인 table data 요소의 도움을 받아
다른 컬럼에 대한 값들을 정의할 수 있기 때문입니다
이제 우리가 리스트에 있기에
이 테이블 열은 key를 받아야 합니다
저는 간단히 year 속성을 식별자로서 활용하겠습니다
여기 개발자 툴에서 볼 수 있듯이
여기 year은 각 년도마다 다른 값을 가집니다
따라서 이것은 완벽한 식별자입니다
여기서 우리는 다섯 개의 td 요소가 필요합니다
왜냐하면 우리는 이 테이블 헤드에 다섯 개의 열이 설정되어 있기 때문입니다
첫 번째 열에서
즉, 첫 번째 td 요소에서
우리는 year 식별자를 출력하고 싶습니다
따라서 우리는 단순히 yearData.year.를 출력하고자 합니다
여기 두 번째 요소에서는
우리는 Investment Value를 출력하고 싶습니다
즉 이 년도가 끝날 때
투자의 현재 금액입니다
여기 데이터를 볼 수 있듯이
우리는 이것을 여기 valueEndOfYear에서 가지고 있습니다
따라서 year에서는 우리는 yearData.valueEndOfYear를
출력할 수 있습니다
이것을 한다면
우리는 여기서 확인할 수 있습니다
출력은 보이는 대로 작동하지만
특히 추후 년도에서는
그다지 멋지게 보이지 않습니다
이것은 정말 예쁘지 않습니다
그러나 이것이 제가 이 investment.js 파일에
formatter 객체를 생성한 이유입니다
이것은 이 숫자들을 포맷하고
더 예쁘게 만드는 것에 사용될 수 있습니다
따라서 Results.jsx에서는
우리는 이 investment.js 파일로부터
이 formatter 를 import 해야 합니다
그러고 나서 이 아래의 formatter를 활용하여
다음과 같은 format 메소드로
포맷되어야 할 데이터를 정리할 수 있습니다
따라서 formatter 포맷을 호출하고
포맷되어야 할 값을 전달하는 것은
이것과 같이 출력이 더 좋아 보이게 합니다
그리하여 이것은 좋아 보입니다 그러나 우리는 아직 끝나지 않았습니다
대신에 여기 다음 필드로
저는 주어진 년도에 벌어들인 interest를 출력하고 싶습니다
그리고 이것은 날 것의 데이터에서 볼 수 있습니다
여기 이 interest 속성입니다
다시 우리의 코드로 돌아와서
저는 yearData.interest를 출력하고 싶습니다
그러나 우리는 이것을 또 포맷하고 싶습니다
따라서 저는 포맷된 interest를 출력할 수 있도록
format 메소드로 다음을 정리할 것입니다
이제 다음 열에서 저는 이제
지금까지 모든 해의 total interest (총 이자)를 출력하고 싶습니다
당연히
이것은 우리가 여기서 개별적으로 저장하고 있는 속성이 아니지만
다른 프로퍼티를 활용하여
계산할 수 있는 값입니다
왜냐하면 예를 들어 year 3 에서
벌어들인 Total Interest는 단순히 각 year의 마지막의 값에서
이번 연도의 annual investment를 빼고
전년도들의 annual investment를 빼는 것이기 때문입니다
결과적으로 그 년도의 annual investment
빼기 initial investment 입니다
따라서 우리가 initial investment와
모든 annual investment를 뺀다면
우리는 모든 년도에 번 total interest 값을 얻게 됩니다
따라서 여기
이 함수에서 저는 map 으로 전달하고 있습니다
total interest 값을
yearData.valueEndOfYear 와
yearData.annualInvestment를 빼기 하고
yearData.year로 곱함으로서 계산합니다
왜냐하면 우리는 매 년도에
annual investment 를 빼줘야 하기 때문입니다
그러나 우리는 또 initial investment 를 빼야 합니다
그리고 우리는 이것을 우리의 객체에 보관하지 않습니다
그러나 당연히 우리는
첫 번째 년도의 결과를 기반으로
initial investment를 쉽게 계산할 수 있습니다
왜냐하면 첫 번째 해에서
만약 우리가 interest 와 annual investment를
valueEndOfYear에서 뺐다면
우리는 initial investment만 남았을 것입니다
따라서 당연히 results 컴포넌트로 돌아와서
아마 여기 시작에서
우리는 results 데이터 배열을 긁어옴으로써
우리의 initial investment를 도출할 수 있을 것입니다
그 첫 번째 값을 접근함으로서 말입니다
그리하여 첫 번째 년도의 결과입니다
그리고 여기 저는 valueEndOfYear를 얻고 싶습니다
그리고 제가 interest를 얻은 동일한 년도를
그것으로부터 뺍니다
당연히 또 같은 년도의
annual investment 또한 뺍니다
이로써 저는 initial investment를 도출했습니다
따라서 우리는 initial investment도 얻었고
이 year를 또 빼서
주어진 년도에 얻은 total interest를 계산할 수 있습니다
따라서 저는 여기 initial investment를 뺍니다
이를 가지고 우리는 이제 네 번째 열에
포맷된 total interest를 출력할 수 있습니다
저장한다면
우리는 여기서 total interest 출력을 보게 됩니다
이제 마지막으로
우리는 해당 연도의 총 invested capital을
출력해야 합니다
그리고 이것은 total interest의 반대입니다
따라서 우리는 이것을 간단히
valueEndOfYear를 사용하고
total interest를 빼서 계산할 수 있습니다
왜냐하면 그 차이가
우리에게 총 투자된 양을 의미하기 때문입니다
따라서
우리는 이것 또한 totalAmountInvested라는 포맷으로
감싸주면 포맷된 방법으로 출력할 수 있습니다
이것을 저장하면
우리는 이 마지막 열에서
해당 연도의 끝에서 invested capital 을 확인할 수 있습니다
이로써 이 결과 테이블은 마무리 되었고
이 전체 앱 또한 마무리 되었습니다
적어도 이 앱의 첫 번째 버전은 끝났습니다
왜냐하면 아직 이 앱에 고쳐져야 할
잠재적인 몇 개의 문제가 있기 때문입니다