우리가 유저의 input을 모으고
저장하였기에 이제는 그 input을
investment.js 파일에서 찾을 수 있는
유틸리티 함수
즉, 이 calculateInvestmentResults 함수와 함께 사용하여
최종적으로 이 테이블에서
우리가 보여주고 싶은 결과를 계산하기 위해 사용할 때입니다
따라서 물론
우리는 질문에 답을 해야 합니다
이 함수가 어디에 사용되어야 하며 그 결과가 어디에서 계산되어야 하는지
우리가 그것들을 어디에서 필요로 하는지 말입니다
물론 우리는 이 userInput 컴포넌트에서
그 값들을 계산할 수 있습니다
우리는 여기 userInput 객체를 가지고 있습니다
이것은 실수가 아니라 편리하게 우리가 input으로서
이 calculateInvestmentResults 함수를 위해 필요한 모양을 정확히 가지고 있습니다
우리는 또 이 네 가지 속성을 가진 input으로서의
객체를 얻기를 기대하기 때문입니다
네 가지 속성은 여기에 가지고 있는 것입니다
만약 여러분이 개별 상태 슬라이스로 갔다면,
물론 간단히 이 객체를
여러분의 상태 슬라이스에 기반으로 불러 오는 것을 통해
합칠 수 있습니다
그러나 둘 중 어떤 방식이든 우리는 userInput 컴포넌트에
이 함수를 사용하고 우리의 결과를 여기서 계산할 수 있습니다
그러나 이 컴포넌트에서 우리는 그 결과들을 필요로 할까요?
이 질문에 대한 답변은 아마도 아니오 입니다
왜냐하면 비록 우리가 지금 가지고 있지 않더라도
저는 그 results 테이블에 출력하기 위해
개별의 컴포넌트를 추가할 것을 계획하기 때문입니다
그렇다면 그 테이블은
userInput 컴포넌트 아래 보여져야 합니다
따라서 제가 여기 전용 컴포넌트 내에
결과를 출력하고자 하기에 우리는 userInput 컴포넌트로부터
우리의 userInput을 받아 이를 App 컴포넌트로 보내야 합니다
따라서 여기서 우리는 결과를 계산하고
그 결과를 results 컴포넌트로 전달할 수 있습니다
혹은 userInput을 Results 컴포넌트로 전달하고
거기에서 결과를 계산할 수도 있습니다
따라서 그것이 제가 여기서 할 것입니다
저는 새로운 컴포넌트, Results.jsx를 추가할 것입니다
그리고 그 안에 Results 라는 이름의
함수 컴포넌트를 추가할 것입니다
그리고 저의 목표는 여기 컴포넌트에
input으로서 userInput을 얻는 것입니다
즉 이 Results 컴포넌트에 프로퍼티로 말입니다
따라서 이 Results 컴포넌트에서 저는 그 results 데이터를 계산하고
그 results를 테이블에 출력합니다
일단은 나중에 대체될 Results 라는
플레이스홀더를 반환하겠습니다
그리고 먼저 userInput 컴포넌트로부터 userInput을
App 컴포넌트로 가져올 것입니다
그러면 여기에서 사용할 Results 컴포넌트로
다시 전달할 것입니다
따라서 우리가 여기서 할 수 있는 것은
단순히 userInput 컴포넌트에서 App 컴포넌트로
이 상태를 끌어올리는 것입니다
여기 상태를 잘라서
다음과 같이 App 컴포넌트 함수에 추가할 수 있습니다
그리고 이 파일에 useState를 import합니다
왜냐하면 우리가 이 함수를
여기 App 컴포넌트 파일에서 사용하기 때문입니다
그리고 물론 우리는 이 handleChange 함수도
끌어 올려야 합니다
따라서 userInput 컴포넌트로부터 잘라내고
App 컴포넌트로 이동시킵니다
이로써 우리는 userInput 컴포넌트에
새로운 속성을 추가해야합니다
왜냐하면 userInput 컴포넌트 내부로부터
handleChange 함수를 불러 올 수 있기 때문입니다
따라서 우리는 useInput 컴포넌트에
이 handleChange 함수를 값으로 전달해야 합니다
그리고 여기에 onChange 혹은 onChangeInput이라는 이름의
속성을 추가하겠습니다
이름은 여러분의 컴포넌트이기에 여러분의 선택입니다
저는 onChange로 하겠습니다
그리고 여기에 handleChange라 하겠습니다
이제 이 함수는 값으로 userInput에 전달되었습니다
배운 것처럼 여기서 여러분은 함수를 호출하지 않고
괄호를 추가하지 않고
그냥 값으로서 이를 사용합니다
이로써 userInput 컴포넌트에서
우리는 이 속성을 수락하고 여기서 구조 분해 할당합니다
제가 방금 추가한 onChange 속성입니다
여기서 상태를 더이상 관리하지 않게
이 import를 지웁니다
그리고 이제 여기 onChange 속성은 함수를 보유합니다
왜냐하면 우리는 onChange에 함수를 값으로서 전달하기 때문입니다
그리고 우리는 여기서 onChange를 함수로 불러도 됩니다
따라서 여기 이 우리가 handleChange라고 불렀던
익명의 함수에서
결국엔 다 동일한 함수이기에
onChange라고 부를 것이고
이것은 속성을 통해 받아집니다
그리고 저는 모든 이러한 input 필드에 대해
onChange를 호출하여 이 데이터를 최종적으로
app 컴포넌트로 전달하고 거기에서 handleChange 함수에 전달할 것입니다
그러나 당연히 여기 userInput 컴포넌트에서
우리는 user input도 필요로 합니다
이 input 필드의 값들을 업데이트 하기 위해서는
그 userInput 객체가 필요합니다
따라서 우리는 당연히
여기 userInput 불릴 수 있는 두 번째 속성을 수락해야 하고
이것은 우리가 jsx 코드에서
어떤 수정도 하지 않기 위함입니다
그리고 이것은 이제 userInput 객체를 값으로
가져야 할 속성이어야 합니다
따라서 다시 App 컴포넌트로 돌아가서
우리는 반드시 userInput 컴포넌트에
이 userInput 속성을 설정해야 합니다
그리고 userInput= 를 여기 userInput 상태로 설정해야 합니다
따라서 이 객체가 userInput 속성을 위한 값으로서
userInput 컴포넌트에 전달되는 것입니다
userInput이 많은 것을 압니다
우리는 당연히 프로퍼티를 위해 여기서
다른 이름을 사용해도 됩니다 원한다면 상태에서 또한 마찬가지로
모두 다시 이름을 붙여도 됩니다
이로써 우리는 이제 여기 userInput 상태를 userInput 컴포넌트로부터
App 컴포넌트로 끌어올렸습니다
우리가 이것을 하는 이유는
이 userInput 을 results 컴포넌트로 전달하여
거기서 속성을 얻기 위함입니다
그리고 다시 여기에서 속성 구조 분해 할당을 통해
이를 별도의 변수에 저장하고
여기에서는 userInput 이나 그냥 input으로 이름을 지정하여
코드를 더 유연하게 할 수 있습니다
그리고 일단 여기에서는
console.log (input) 을 합니다
이를 가지고 App 컴포넌트로 돌아와서
userInput 컴포넌트 아래에
저는 이제 그 Results 컴포넌트를 출력하고 싶습니다
이를 위해, 당연히 이 Results.jsx 파일로부터
Results를 import해야 합니다
그리고 여기 Results 컴포넌트에서
우리는 이 input 프로퍼티를 설정해야 합니다 이것은
제가 임의로 이 Results 컴포넌트 함수에 추가한 것입니다
그리고 이것을 이 userInput 상태와 같다라고 설정합니다
이 상태는 우리가 userInput 컴포넌트에 전달하는 것과 같은 userInput 상태이며
따라서 우리는 이 상태를 결국
이 상태를 필요로 하는
두 가지의 다른 컴포넌트와 공유합니다
이로써 여러분이 이 앱의 모든 파일을 저장한다면
여기 아래 결과 텍스트를 보실 겁니다
현재는 단지 플레이홀더에 불과합니다
그러나 더 중요하게 여기 개발자 툴을 연다면
여기에 객체가 로그 출력된 것을 볼 수 있습니다
최종적으로 이것은 userInput 상태 객체입니다
따라서 당연히 이것을 지우고
여기서 input을 변경한다면 여러분은 이것이 업데이트되고
업데이트된 객체가 여기에 업데이트된
예를 들어 1500의 연간 투자금액을 가지고
로그 출력된 것을 얻을 수 있습니다
따라서 userInput을 results 컴포넌트로 전달한 것이 잘 실행되었습니다
이로써 우리는 Results 컴포넌트로부터
results 데이터를 도출할 수 있습니다