[React, typescript] 다른 컴포넌트에 props로 함수 넘겨주기

부모 컴포넌트

숫자를 넘겨받아 이전 상태에 더해주는 handleLevel이라는 함수를 만든다

import React, { useState } from 'react';

const ParentComponent: React.FC = () => {

  const [score, setScore] = useState(1);
  
  const handleScore = (value: number) => {
  	setScore((prev) => prev + value);
  }
  
  return (
  	<div>
  	  <ChildComponent handleScore={handleScore} />
    </div>
  )

}

 

자식 컴포넌트

handleScore 함수를 넘겨받아, 버튼을 누르면 handleScore 함수를 실행하도록 한다.

import React from 'react';

type Props = {
  handleScore: (value: number) => void;
}

const ChildComponent: React.FC<Props> = ({ handleScore }) => {
  return (
      <button onclick={() => handleScore(10)}> 버튼 </button>
    )
}