[React + TS] 부모컴포넌트 setState 함수 자식컴포넌트로 Props 전달

 

React + TypeScript 에서 부모컴포넌트 에서 자식 컴포넌트로 setState 함수를 넘길때  자식 컴포넌트에서 타입정의를 하지 않으면 에러가발생한다. 아래와 같이 자식 컴포넌트에서 interface 를 사용하여 타입을 정의하여 사용한다.

 

부모컴포넌트 (<Parent>)

const Parent = () => {
	
    const [value, setValue] = useState<string>("");
    
    return (
    	<div>
        	<Children setValue={setValue}/>
        </div>
    )
}

 

자식컴포넌트(<Children >)

interface ParentProps {
    setValue: React.Dispatch<React.SetStateAction<string>>
}

const Children = ({setValue}: ParentProps) => {
	
    
    useEffect( () => {
    	setValue("...")
    })
    
    return (
    	<div>...<div>
    )
    
}