리액트 책을 보면서 공부중인데 아래의 코드가 제대로 작동을 않합니다

Question

import { useState } from react; type CounterProps = { initialValue: number; }; const Counter = (props: CounterProps) => { const { initialValue } = props; // 계정을 유지하는 하나의 상태를 useState()로 선언한다. 인수에는 초깃값을 지정한다. // count는 현재 상태, setCount는 상태를 업데이트하는 함수다。 const [count, setCount] = useState(initialValue); return (

Count: {count}

{/* setCount를 호출해서 상태를 업데이트한다 */}

); }; export default Counter; 책에 있는거 그대로 코딩 했는데 Property initialValue is missing in type {} but required in type CounterProps 이런 에러가 발생해요 왜 그런걸까요

김주호 · Answer

처럼 initialValue를 포함하지 않고 와 같이 작성하신 부분이 있나요? 작성하신 const Counter = (props: CounterProps) => { 는 이 함수가 props라는 인자를 받는데 그 인자의 타입이 CounterProps라는 뜻이고 type CounterProps = { initialValue: number; }; 라는 코드는 CounterProps 타입 내부에 있는 initialValue가 숫자라는 뜻입니다. 지금 당장은 라고 호출한 것이 Counter({})와 같다고 보시면 되고 그렇다면 initialValue가 number라고 생각하는 함수 입장에서 initialValue가 number가 아닌, 심지어 미지정된 상태에서 왔다고 보시면됩니다. 그래서 즉슨 Counter({initialValue: 5})로 호출해야 함수가 원하는 형태로 인자가 넘어 가는것이죠