4. React와 함께 TypeScript 사용하기(3), [ 상향식 State 이동 (함수) 사용하기, props 와 함수 ]

상향식 State 이동을 사용해보자 = ( 상위컴포넌트에서 하위로, 함수를 넘겨주고 실행시키자 )

혹시 까먹었을 수 있으니 타입스크립트가 없는 코드는

<App.js>  ========================================

        function App() {

          const onAddTodo = (text) =>{
            console.log(text)
          }

          return (
            <div className="App">
              <Todos items={items} amount={3} />
              <NewTodo onAddTodo={onAddTodo}/>
            </div>
          );
        }

        export default App;

< Component > ========================================

        import React from "react";
        import { useRef } from "react";

        const NewTodo = (props) => {
          const { onAddTodo } = props
          const textRef = useRef();

          const submitHandler = (event) => {
            event.preventDefault();

            const textData = textRef.current.value;

            props.onAddTodo(textData)
          };
          return (
            <div>
              <form onSubmit={submitHandler}>
                    ...
                    
                    
 ==> 상위컴포넌트에서 포인터를 넘겨준 함수를 가지고
 	하위컴포넌트의 값을 가지고 그 포인터를 실행함으로써, 상위 컴포넌트에서 실제로 실행되고,
 	하위 컴포넌트의 값을 상위 컴포넌트에 올릴 수 있다.

 

 

타입스크립트를 사용한다면, 넘겨주는 함수의 타입을 지정해주어야한다.

<App.js>  ========================================

        function App() {

          const onAddTodo = (text:string) =>{
            console.log(text)
          }

          return (
            <div className="App">
              <Todos items={items} amount={3} />
              <NewTodo onAddTodo={onAddTodo}/>
            </div>
          );
        }

        export default App;

< Component > ========================================

        import React from "react";
        import { useRef } from "react";

        const NewTodo: React.FC<{ onAddTodo: (text: string) => void }> = (props) => {	// 1*
          const textRef = useRef<HTMLInputElement>(null);

          const submitHandler = (event: React.FormEvent) => {
            event.preventDefault();

            const textData = textRef.current!.value;

            props.onAddTodo(textData);		// 2*
          };
          return (
            <div>
              <form onSubmit={submitHandler}>
                    ...

1*. onAddTodo 함수는, App.js 에서 props 로 넘겨준 함수이다.
	"props 객체" 를 사용하므로 React.FC<{ }> 를 사용하여, props 객체 안에 대한 값의 타입을 지정한다.

    onAddTodo 의 타입은 "함수" 이다.
    	따라서 onAddTodo : () => {} 가 된다. [ 함수타입 명명 : () => {return}]

    하지만 onAddTodo 는 반환값이 없다. 즉, void 타입이다.
    	따라서 onAddTodo : () => void 가 된다.
        
    또한, 파라미터를 받는다. 파라미터의 타입은 string 이다. 파라미터 이름은 맘대로 짓는다.
    	따라서	" onAddTodo : (text:string) => void "	가 최종 onAddTodo 의 타입이 된다.

2*. 타입을 정했으니, 사용은 편하게 하면 된다.