타입스크립트 문법 해석

📌 useState  배열 구조 분해(destructuring) 타입스크립트 문법

 

const [comments, setComments] = useState<{ id: string; text: string }[]>([]);

 

해석

✔ 구조분해

💻 [comments, setComments]

[현재 상태 값, 상태 업데이트 함수]

 

✔ 타입스크립트 타입 지정

💻  <{ id: string; text: string }[]>

comments는 객체 배열이며, 각 객체는 { id: string; text: string } 형태

 

✔ useState 초기 상태

💻  ([]);

초기 상태는 빈배열

 

 

📌 props 타입스크립트 문법

💻  export default function ClientComments({ styles } : { styles: { [key: string]: string }}) {

styles : {} => styles은 객체이다

[key: string]:string => key는 string 이고 key의 value도 string 이다