[TypeScript] Interface

처음엔 React의 Props 문법을 사용하려고 하다가 TypeScript에서 사용한 더 편한 예시를 봤다. 더 편한 코드를 짜고 싶기에 한 번 사용해봤다 

interface SliedeSwProps{
    title : String;
    content : String;
}

const slides : SliedeSwProps [] = [
    {title : "Nike",
     content : "Just Do It"},
    {title : "Adidas",
    content : "삼선이 이쁨"},
    {title : "Hoka",
    content : "치고 올라오는 브랜드"},
    {title : "Mizuno",
    content : "발 편한 축구화 맛집"},
    {title : "UMBRO",
    content : "바람막이 이쁨"},
];

TypeScript를 활용하여 React 개발을 할때의 좋은 점 중 한가지는 바로 Props를 받는 쪽에서 정할 수 있다는 점이라고 한다. Props로 지정할 수 있는 변수들의 이름과 형태까지 지정해 줄 수 있어서 자식 컴포넌트에 Props를 넘겨줄 때 일어나는 문제점을 미리 방지 할 수 있다.

 

interface 이름은 마지막에 Props 를 붙여준다 그리고 받으려는 속성값을 정의하고 타입까지 정해주면 된다나는 여기서 title 에는 브랜드명 content 에는 내가 생각하는 브랜드의 특징을 넣었다(재미로)

그리고 slides 정의를 해주고 SliedeSwProps 배열로 5개를 넣어줬다. 이 방법을 사용하여 배너 안쪽에 내용을 편하게 입력해주었다.

 

출처:https://velog.io/@jungsw586/React-TypeScript-Props-%EC%82%AC%EC%9A%A9%EB%B2%95