useState()

우선 리액트에서 State는 부모에서 자식으로 단방향으로 흐른다. 부모 -> 자식으로 데이터를 넘겨주지만, 자식에서 공통으로 쓸 수 있는 state가 부모에게 있다면, state을 수정하면 조금 더 효율적인 코드를 작성할 수 있다.
이때, 사용하는 것이 Lifting State Up이라는 방법으로 공통된 state를 여러 자식 컴포넌트에게 주어야할 경우 부모 컴포넌트로 state를 끌어올려 서로 공유하는 상태가 되는 것을 말한다.

Component

ParantComponent

	import {Fragment} from 'react';
	import IncreseButton from '저장경로'
	import DecreseButton from '저장경로'
	export interface counterProps{
      increse: (num : number) => void
      decrese: (num : number) => void
    }
    const Counter = () =>{
      //직접 타입을 지정해줄 수 있지만, 타입스크립트에서 타입 추론이 잘 동작한다면
      // 굳이 필요하지 않다. useState(0);
      const [isCounter, setIsCounter] = useState<number>(0);
      const increseHandler = (num) =>{
        setIsCounter(current => current + num);
      }
      const decreseHandler = (num) =>{
        setIsCounter(current => current - num)
      }
      return(
      	<Fragment>
        	<h1>{isCounter}</h2>
     		<IncreseButton increse={increseHandler}/>
        	<DecreseButton decrese={decreseHandler}/>
        </Fragment>
      ) 
    }
    export default Counter;

1. 부모 컴포넌트는 다음과 같다 컴포넌트의 counter state가 0으로 초기화되고 렌더링한다.
2. 리액트가 브라우저에 화면을 보여준다.
3. 자식 컴포넌트에서 state를 수정한다면, 재 렌더링을 한다.
4. 다시 브라우저에 리액트가 업데이트하여 브라우저에 화면을 보여준다.

ChildComponent1(IncreseButton)

	import {counterProps} from './PrantComponent'
	import React from 'react'
	const IncreseButton(props: counterProps) {
      const plusHandler = (e: React.MouseEvent) =>{
        //필요한 코드는 아니지만 예시를 위해 작성.
        e.preventDefault();
        //클릭시 props 객체에서 increse 함수를 부른다.
        //increse 함수는 부모의 increseHandler를 바라보고 있다.
        //즉, increse는 increseHandler 함수를 뜻한다.
        props.increse(1);
      }
      return(
      	<button onClick={plusHandler}>Plus</Button>
      )
    }

React.MouseEvent

리액트에서는 많은 합성 이벤트를 사용할 수 있다. 타입스크립트에서는 이벤트 객체를 받기 위해서 이벤트의 타입을 지정해줘야한다.
React 합성 이벤트 살펴보기

ChildComponent2(DecreseButton)

	import {counterProps} from './PrantComponent'
	const DecreseButton(props: counterProps) {
      const minusHandler = () =>{
         props.decrese(1);
      }
      return(
      	<button onClick={minusHandler}>Minus</Button>
      )
    }

Typescript State 끌어올리기

export interface counterProps{
      increse: (num : number) => void
      decrese: (num : number) => void
    }

타입을 정의하지 않는다면

			//위의 타입을 정의하지 않는다면 오류를 발생시킨다.
			<IncreseButton increse={increseHandler}/>
        	<DecreseButton decrese={decreseHandler}/>

타입 스크립트에서 State 끌어올리기를 사용하려면 props를 통해서 넘겨주는 속성도 interface 및 type을 사용하여 타입을 정의해야 한다.
이 것을 지키지 않는다면, 결국 Typescript는 추론하지 못해 오류를 발생시킨다.

Reference

https://ko.reactjs.org/docs/lifting-state-up.html
https://pinokio0702.tistory.com/365