따라서 이제 우리가 여기에 header 컴포넌트를 추가하였으니
이 investment calculator 앱을 구축하는데 의미가 있는
다음 단계는 유저 입력을 처리하는
컴포넌트를 추가하는 것입니다
왜냐하면 우리는 이 입력을
투자 결과 데이터를 계산하기 위해 필요할 것이기 때문입니다
따라서 우리가 필요한 데이터나 혹은
우리가 스크린에 보여주고 싶은 테이블입니다
따라서 저는 하나의 새로운 컴포넌트를 추가하겠습니다
왜냐하면 당연히 이미
지난 섹션에서 배웠듯이, 리액트의 목표는
모든 컴포넌트가 고유의 책임을 가지는 컴포넌트로
앱을 분리하는 것이기 때문입니다
그리고 저는 그 유저 입력을 받는다는 건
분리된 컴포넌트로 들어가야 하며
앱의 분리된 기능이라고 말하고 싶습니다
그것이 바로 제가 여기에 따로 컴포넌트를 추가하는 이유입니다
이 UserInput 함수라고 부를 수 있습니다
이 컴포넌트는 필요한 여러 사용자의
입력 조각들을 가져오는 책임을 갖게 될 것입니다
초기 투자 금액 등이 있습니다
따라서 여기서는 새로운 컴포넌트 함수를 내보내고
이 컴포넌트 함수에서
section을 반환하고자 합니다
혹은 form을 반환할 수도 있으나
나중 강의에서 리액트로
form 요소를 다루고 UserInput을 처리하는지에 대해
분리된 섹션에서 자세히 다루겠습니다
따라서 이제 저는 여기에 section으로 가겠습니다
그리고 이 section에 user-input을 줍니다
이것이 index.css 파일에서
찾을 수 있는 또 다른 ID이기 때문입니다
거기서 여러분은 ID가 user-input인 요소를 찾는
css 규칙을 찾을 것입니다
그것이 왜 제가 여기 section에 이것을 추가하는 지에 대한 이유입니다
그런 후 여기 section에서
여러 입력 필드를 출력하고 싶습니다
그 입력 필드들을 구성하기 위해
그리고 좋아 보이게 하기 위해서
여기에 이전에 배웠던 className 프로퍼티로 추가된
css 클래스로 div 를 추가합니다
이것은 index.css 파일에서도 찾을 수 있는 것입니다
거기에서는 이러한 input group css 클래스를
찾는 규칙을 찾을 것입니다
그리고 여기 div에 추가합니다
따라서 이 div 안에 우리는 paragraph 를 추가할 수 있고
이것은 label 과
input 요소를 보유하게 됩니다
저의 아이디는 간단히 input 그룹 내에
다음과 같은 label과 input 조합을 여러 개 가지는 것입니다
그리고 이 input-group CSS 클래스가
이 서로 다른 paragraph들이
같은 줄의 서로 옆에 등장하도록 할 것입니다
그러나 여기서 그 input 요소들의 개념은
유저에게 Initial Invesment (초기 투자액)을 물어보는 것입니다
따라서 초기에 투자된 금액과
그리고 Annual Investment (연간 투자량)을 유저에게 물어보는 것입니다
그리하여 Initial Investment (초기 투자액)후에
유저가 얼마 만큼의 돈을 매년 투자하고 싶은지 (Annual Investment) 말입니다
그런 후 저는 첫 번째 그룹 밑에
두 번째 input 그룹을 갖고 싶습니다
우리가 Expected Return (예상 수익)을 물어보는 곳입니다
유저가 매년 기대하는
수익율입니다
그리고 마지막으로, 투자 기간 (Duration)입니다
돈이 필요할 때까지
얼마나 오래 유저가 투자를 할 것인지에 대한 계획입니다
이것들이 필요한 네 가지의 입력 필드입니다
네 가지의 label, input 조합과
각 label 에 대해 숫자를 입력으로 받을 것으로
예상되는 input 이 있는 것입니다
따라서 여기의 input type을 number 로 설정하고
이것은 단순히 유저에게 input 필드가 어떻게 보여지고
어떻게 작동하는지에 영향을 미칩니다
따라서 저는 모든 input 필드에 적용할 것입니다
왜냐하면 이 모든 값들이 결국 숫자이기 때문입니다
추가적으로 저는 required 속성을
모든 input 필드에 추가할 것입니다
이는 간단히 모든 값들이 반드시 입력되어야 하도록 합니다
그리고 또한 required = {true} 라고 작성할 수도 있으나
다음과 같이 단지 속성을 추가하는 것이 더 짧고
똑같은 결과를 낼 것입니다
이제 우리는 당연히 유저가 입력한 값을 얻기 위하여
몇 가지의 로직을 추가해야 합니다
그리고 그 값을 다시 해당 input 필드에 반영해야 합니다
따라서 제가 이 강좌의 초반에 보여 주었던
양방향 바인딩이 필요합니다