리액트 타입스크립트 props 값 전달하기 - 셀프 개발자 코딩 부트캠프

부모가 자식 컴포넌트 에게 값을 넘겨줄때 사용한다.

 

App.tsx

import MyComp from './MyComp';
function App() {
let name = "리액트";
 
return (
  <>
   <div>{name}</div>
   <MyComp num={10}></MyComp>
  </>
);
}
export default App;

위와같이 부모가 자식에게 보내줄 수 있다. 

 

type MyCompProps = {
   title: string,
   num: number;
}
 
// typescript에서는 propTypes를 지정 안해도 될것 같다.
const defaultProps = {
   title : "Default Title",
   num : 0
};
 
// props라는 이름은 아무렇게나 지정도해 상관 없는것 같다. 바꿔도 잘 동작한다.
const MyComp = (props:MyCompProps) => {
   return (
       <>
           <div>{props.title}</div>
           <div>{props.num}</div>
       </>
 
   );
}
 
// defaultProps 지
MyComp.defaultProps = defaultProps;
 
export default MyComp;

 

https://jinibh.tistory.com/711

리액트 useState - 셀프 개발자 코딩 부트캠프