props_TypeScript

받는 컴포넌트

interface PropsType {
  list: Array<string>;
}
const App = (props: PropsType) => {
  return(
    {props.list.map((list: string, index: number) => (
    <li key={index}>{list}</li>
))}
)

또는

type appProps = {
list:string;
}
const App = ({list}: appProps) => {}

또는

const App = (list: string) => {}

• props 내려줄 때 에러가 난다면 받는 컴포넌트의 타입확인하기

배열로 받을 때

list: { title: string; url: string }[];

예제

interface propsType {
  buttonText: string;
  big?: boolean;
  onClick?: React.MouseEventHandler<HTMLButtonElement>;
  type?: 'submit' | 'button' | 'reset';
}

const Button = (props: propsType) => {
//props.big 으로 사용
}