[ React, TypeScript] 리액트 프로젝트에 인터페이스 및 슬라이드 적용

■ 개인 작업물용 갤러리페이지에 아이템들을 표현하기 위해 컴포넌트 및 슬라이드 적용

---

■ 데이터 표현을 위한 interface 및 class , Mock Data 만들기

폴더구조

---

1. Models 폴더에 IVewModel 파일 새로 만들고 interface 정의해주기

■ 파일 : IViewModel.ts

export interface IViewModel {
    title : string;
    imagePath : string | undefined;
}

 

1. IViewModel 을 상속받는 View 클래스 만들기

export class View implements IViewModel {
    
    //멤버변수
    title : string
    imagePath : string | undefined
    
    //생성자
    constructor(title:string, imagePath : string | undefined){
        this.title = title;
        this.imagePath = imagePath;
    }
}

 

 

2 Mock 데이터가 필요한 컴포넌트 파일에서 목 데이터 정의해주기 

■ 파일 :ContentContainer.tsx

IViewModel을 상속받은 View 클래스를 배열로 정의해
내부에 Mock 데이터 인스턴스를 생성해준다.

const ViewList : View[] = [
    new View("hello","world"),
    new View("mock1","data1"),
    new View("mock2","data2"),
    new View("mock3","data3"),
    new View("mock4","data4"),
    new View("mock5","data5"),
    new View("mock6","data6"),
    new View("mock7","data7"),
    new View("mock8","data8"),
]

정의된 목데이터를 콘솔로 찍어본 결과

3. 사용할 컴포넌트 내에서 map을 통하여 컴포넌트 인자로 넘겨주기

export default function ContentContainer() {
    
    return (
        <Wrapper>
            <SlideWrapper id="disable_scroll">
                {ViewList &&
                    ViewList.map((view, index) => {
                        return (
                            <div key={`view-${index}`}>
                            	//데이터를 자식컴포넌트로 넘겨주는 부분
                                <OneViewRender view={view}/>
                            </div>
                        )
                    })}
            </SlideWrapper>
        </Wrapper>
    )
}

 

■ ContentContainer.tsx 전체코드

- css 에서 overflow : hidden 과 scroll 을 사용하여 슬라이드 느낌이 나도록 만들어주었다.

import styled from "styled-components"
import  {View } from "../Models/IViewModel"
import OneViewRender from "./Contents/OneViewRender"

const Wrapper = styled.div`
    height : 70vh;

    display : flex;
    align-items : center;
    // padding : 1%;
    // box-shadow : 1 1 1 1;
`
const SlideWrapper = styled.div`
    // background-color : red;
    width : 100%;
    height : 70vh;

    display : flex;
    align-items : center;
    // justify-content : space-around;
    overflow : hidden;
    overflow : scroll;
    transition : 0.5s;

    @media screen and (max-width: 800px) {
        flex-direction: column;
        height : 70vh;
    }
`


const ViewList : View[] = [
    new View("hello","world"),
    new View("mock1","data1"),
    new View("mock2","data2"),
    new View("mock3","data3"),
    new View("mock4","data4"),
    new View("mock5","data5"),
    new View("mock6","data6"),
    new View("mock7","data7"),
    new View("mock8","data8"),
]

export default function ContentContainer() {
    
    return (
        <Wrapper>
            <SlideWrapper id="disable_scroll">
                {ViewList &&
                    ViewList.map((view, index) => {
                        return (
                            <div key={`view-${index}`}>
                                <OneViewRender view={view}/>
                            </div>
                        )
                    })}
            </SlideWrapper>
        </Wrapper>
    )
}

---

■ 데이터를 받은 자식 컴포넌트에서 랜더링

1. 함수에 view class 를 타입지정한 파라미터를 받아오고 랜더링 해주기 

export default function OneViewRender({ view }: { view: View }) {

    return (
        <ViewWrapper >
            <span>{view.imagePath}</span>
            <span>{view.title}</span>

        </ViewWrapper>
    )
}

 

■ 전체코드

import { View } from "../../Models/IViewModel";
import styled from "styled-components";
import "../../App.css"


const ViewWrapper = styled.div`
    margin : 30px;
    width : 300px;
    height : 400px;
    background-color : blue;

    transition :0.5s;
    box-shadow: 3px 3px 3px 3px #555555;

    &:hover {
        width : 400px;
        height : 500px;

        box-shadow: 6px 6px 6px 6px #555555;
    }

    @media screen and (max-width: 800px) {
        width : 350px;

    }
`

export default function OneViewRender({ view }: { view: View }) {

    return (
        <ViewWrapper >
            <span>{view.imagePath}</span>
            <span>{view.title}</span>

        </ViewWrapper>
    )
}

---

■ 작업물