유저가 입력한 값을 얻고
저장하기 위해서는
이 UserInput 컴포넌트에서
몇 가지 상태를 관리해야 합니다
따라서, 우리는 리액트로부터 useState 를 import 해야 합니다
따라서 이 특별한 리액트 훅은 컴포넌트에서
상태를 등록하고 관리하는 데 사용할 수 있습니다
그리고 우리는 여기 useState 훅을
이 컴포넌트 함수에서 호출할 수 있습니다
이제 이 네 가지의
다른 input 필드를 위해
네 가지의 다른 상태들을 관리할 것인지
혹은 이 다른 input 값들을 하나의 객체로
합치는 하나의 상태 객체를 원할 것인지는 여러분의 선택에 달렸습니다
저는 후자로 접근하겠습니다
언급했듯이, 어떤 접근을 선호하든 여러분에게 달렸습니다
그리고 그 객체에서 초기에 10000 라는 기본값으로 설정될 수 있는
initialInvestment를 가집니다
물론 이 값 또한 여러분에게 달렸습니다
저는 annualInvestment (연간투자액)을
1200으로 정하겠습니다
expectedReturn (예상수익)은
6%라고 합시다
그리고 duration 속성은
기본 값 10으로 설정합니다
따라서 이것은 현재 이 상태에 할당된 초기 상태입니다
그리고 우리는 이제 이 두 가지 요소로 돌아와서
함께 작동할 수 있도록 상수에 저장해야 합니다
그리고 저는 이 상수들을
userInput과 setUserInput으로 이름을 붙입니다
결국 이 상태가 최종적으로 무엇을 나타내는 지입니다
이것은 사용자가 제공한 입력을 관리하고 저장하는데 관한 것입니다
이제 우리는 당연히 우리가 input 필드에서
값을 변경할 때마다 발생되어야 할 함수가 필요합니다
이것은 우리가 이 상태를 업데이트하기 위함입니다
이것을 위해 여기 우리는 각각의 input 마다
모든 input과 연결될 수 있는
일반 함수마다
네 가지의 함수를 추가할 수 있습니다
그리고 저는 데이터 접근 방식을 선택할 것입니다
handleChange라는 이름의
함수를 추가합니다
그리고 이 함수에서는 주어진 input을 위해 입력된
newValue을 얻기를 기대합니다
하지만 또 inputIdentifier도 얻기를 기대합니다
따라서 저는 이 함수에서
이 두 가지의 매개변수를 얻기를 기대하고
그리하여 handleChange 함수 안에서
우리는 setUserinput을 호출할 수 있습니다
그리고 나서 저는 기존 상태 값을 기반으로
이 상태를 업데이트 하고 싶습니다
왜냐하면 이 handleChange 함수를 실행할 때
이 네 가지의 속성 중 하나만 업데이트 될 것이기 때문입니다
그리고 당연히 나머지 속성와
그 값들을 잃어버리면 안됩니다
따라서 업데이트 된 상태는 반드시 이전 상태를 기반으로 되어야 하고
따라서 우리는 변경되지 않은 input에 대한
이전 데이터를 계속 가질 것입니다
따라서 여기, 여러분이 배운 것처럼
우리는 이 함수 형식을
이전 userInput과 업데이트 된 상태 객체를 반환하는
상태를 업데이트 하기 위해 사용해야 합니다
그래서 저는 이 새로운 객체에
예전 userInput 상태 객체를 펼치는 것으로부터 시작하겠습니다
이것은 우리가 새로운 객체에 모든 예전 값들을 복사하는 것입니다
그런 후 그 객체의 하나의 단일한 프로퍼티를 덮어 쓰기합니다
그리고 그 속성은 여기 inputIdentifier 매개변수의 도움을 통해
증명될 것입니다
따라서 여기서의 예측은 inputIdentifier가
string 값으로 가질 것입니다
그것이 initialInvestment이든
annualInvestment 혹은 expectedReturn
혹은 duration 이든 우리는 inputIdentifier 에 저장된 값에 따라
속성을 동적으로 설정하기 위하여
이 자바스크립트 구문을 사용할 수 있습니다
그리고는 저는 이 매개변수에 저장된 이름의 속성을
새로운 값으로 설정하고 싶습니다
이것 또한 매개변수로 받습니다
이로써
우리는 좋은 일반적인 hangleChange 함수를 갖췄고
이제 우리의 input과 연결시켜야 합니다
이제 여러분이 이 전에 이 강좌에서 배웠듯이
이 input 필드에
event에 listener 를 추가하기 위해
onChange 속성을 추가할 수 있습니다
그리고 여러분은 change하는 이벤트가 발생할 때
어떤 함수가 실행되어야 할지 정의할 수 있습니다
이제 handleChange에 다음과 같이 가르켜 봅시다
그러나 여기 handleChange 함수는 작동하지 않을 것입니다
왜냐하면 기본적으로 change 이벤트가 발생할 때
리액트가 이 함수를 호출하고
이벤트 객체를 이것에 전달할 것이기 때문입니다
이것은 기본적인 이벤트 객체로
리액트에 의해 자동적으로 생성된 것입니다
그러나 이 이벤트 객체는 유용한 데이터를 포함하나
inputIdentifier를 포함하지 않으며
우리가 여기서 기대하는 두 개의 매개변수 대신에
하나의 속성일 뿐입니다
따라서 우리는 강의에서 전에 배웠던
익명의 새로운 함수를 생성하는
방법을 활용하여야 합니다
이것은 onChange에 값으로 전달된
실제 함수입니다
그리고 이것은 마침내 리액트에 의해
change 이벤트가 발생할 때 실행됩니다 그리고 함수 내에서
우리는 handleChange가 최종적으로 어떻게 실행될지에 대한
모든 통제권을 가지게 됩니다
따라서 이제 우리는 두 인수를
handleChange에 전달해야 합니다
첫 번째 인수는 전에 언급했듯이
네 가지의 속성 중 하나여야 하는
identifier 입니다
이 첫 input은
initialInvestment 에 관한 것이고
여기 이 속성입니다
따라서 이것이 hadleChange에 문자열로 전달된
저의 identifier 입니다
두 번째 값은 당연히
유저를 통해 입력된 값이어야 합니다
이제 우리가 이것을 이벤트 객체의 도움을 통해 얻을 수 있고
이 익명의 함수로부터
그 객체를 얻습니다
왜냐하면 이 익명의 함수가
onChange에 값으로 전달된 것이고
따라서 리액트에 의해 호출될 것이기 때문입니다
그리하여 지금 상황에서 이 익명의 화살표 함수가
이 이벤트 객체를 얻을 것입니다
그리고 이 event(이벤트) 객체는
전에 이 과정에서 배웠듯이
이 input이라 불리는 target 속성을 가집니다
그리고 이 input은 value 속성을 가집니다
이 값은 유저로 인해 입력됩니다
이로써 우리는 우리의 identifier와 유저가 입력한 값으로
handleChange를 호출합니다
그리하여 우리는 상태를 올바르게 업데이트 할 수 있을 것입니다
이제 업데이트 된 값과
초기의 값이 이 input 요소에
다시 전달되도록 해야 합니다
이것은 value 속성의 도움을 통해 할 수 있습니다
이 속성은 이 input 필드를 위해
스크린에 보여질 값을 설정할 때 사용될 수 있습니다
그리고 여기 우리는 userInput 상태 객체를 사용하고 싶습니다
그리고 여기서는 initialInvestment 속성을 사용합니다
왜냐하면 이것이 이 input에서 보여져야 할
값을 가지기 때문입니다
이로써 여기서
우리는 input과 관련하여 마무리가 되었고
이제 다른 input에 똑같은 단계를 반복하고
이곳 다음 input에 값과 바뀌지 않은 속성을
모두 복사하면 됩니다
예를 들어 annualInvestment
따라서 여기서 당연히
우리는 annualInvestment 속성 값을 출력하고 싶습니다
그리고 annualInvestment를 identifier로 활용하여
expectedReturn을 위해 이를 반복합니다
이것은 우리가 expectedReturn를 출력하고
이것을 identifier로 활용하는 것입니다
그러고 당연히 마지막 input도 합니다
duration을 위해 우리는 duration을 출력하고
이를 identifier로 활용합니다
이로써 이 모든 input은 업데이트 되었습니다
이제 우리는 App 컴포넌트에
이 userInput 컴포넌트를 활용해야 합니다
여기 저는 이 header 아래
userInput 컴포넌트를 출력하고 싶습니다
이를 위해 당연히 여러분은 import 해야 합니다
그리고 여러분은 반드시 이것을 하나의 jsx 요소로 정리해야 합니다
예를 들어 여기의 조각들을 말입니다
왜냐하면 전에 과정에서 배웠듯이
header 그리고 userInput과 같은 형제 jsx 요소는
허용되지 않습니다
왜냐하면 메인 값이 변수에 반환 혹은 저장되거나
일반적으로 값으로 사용되기 때문입니다
대신에 여러분은 항상 단지 하나의 뿌리 jsx 요소를 가져야 합니다
그런 다음 필요한 만큼
많은 자식 및 형제 요소를 포함할 수 있습니다
따라서, 우리는 코드를 다음과 같이 보이도록 변경해야 합니다
이로써
우리는 header 아래 이 userInput을 가지고
이 값들을 업데이트 할 수 있어야 합니다
그리고 initialInvestment를 위해 다른 값들을 입력하고
혹은 annualInvestment를 위해 계속합니다
따라서 우리는 이제 결과 데이터를 계산하러
이동할 수 있습니다
또한 당연히 결과 데이터를 테이블에
출력하는 것도 할 예정입니다