Thanks to 현지영

event값

참고 * event가 React.KeyboardEvent<HTMLInputElement> 타입일 때 event.target 대신 event.currentTarget 사용

const handleKeyPress = (e: React.KeyboardEvent<HTMLInputElement>) => {
    if (!(e.target instanceof HTMLInputElement)) return;

    if (e.key === "Enter") {
      onArrDataChange("tags", e.target.value);
      e.target.value = "";
    }
  };
<input type="text" placeholder="태그를 입력하세요" onKeyPress={handleKeyPress}/>

props로 내려주는 값 정의할 때 타입 정의하기, props이외의 값은 types파일에 따로 정리!

velog과제 예시

ex) 서버에서 가져온 article들을 home에서 렌더링

article.type.ts

export interface IArticle {
  id: string;
  title: string;
  body: string;
  summary: string;
  thumbnail: string;
  tags: string[];
  date: string;
}

articles.tsx → page

function Articles() {
  const [articleList, setAritcleList] = useState<IArticle[] | null>(null);

  return (
    <div>
      {articleList &&
        articleList.map((article: IArticle) => (
          <Article key={article.id} id={article.id} title- />
        ))}
    </div>
  );
}

Article.tsx → component

interface IProps {
id: string;
title: string;
summary: stirng;
....

}
function Article({ id, title, summary, .... }: IProps) {
  return (
    <SRoot>
      <div>{summary}</div>
      <div>{title}</div>
      <div>{date}</div>
    </SRoot>
  );
}

IProps값 정의해줄 때 다른 예시 막 적은거

interface IProps {
  setWriteData: (value: IUserData) => void;
	setIsPublishClicked: React.Dispatch<React.SetStateAction<boolean>>;
	isPublishClicked: boolean;
	summary: string;
	onDataChange: (
	    key: "title" | "body" | "summary" | "thumbnail",
	    value: string
	  ) => void;
..... 등등 
}

함수 인자

handleArrDataChange=(여기에 들어오는 값 타입 정의 필요)⇒{}

const handleArrDataChange = (key: "tags", value: string) => {
    const tempArticleData = { ...articleData };
    tempArticleData[key] = [...tempArticleData[key], value];
    setArticleData(tempArticleData);
  };
return(
<WriteTags onArrDataChange={handleArrDataChange}/>
)

onArrDataChange("tags", e.target.value);