React #13 (포트폴리오 용 여러가지 만들기-프로필 카드)

 

※사전 작업

프로젝트 폴더 생성

npx create-react-app ex1 --template typescript
code ex1

 

패키지 설치 (※ 버전 주의)

npm i chance luxon @fontsource/material-icons
npm i -D @types/chance @types/luxon
npm i -D postcss autoprefixer tailwindcss@3.4.17 @tailwindcss/line-clamp daisyui@4.12.14

 

(이전까지 했었던 교재 내용에 들어가있었던 과거 프로젝트로부터의 데이터는 쓰지 않고... 하는 걸로?) 

 

위의 프로필 카드를 만들어보자.

 

 

 

만드는 순서: 

 

※ 'react' import와 각 파트의 export는 기본입니다.

 

1. 프로필 안에 들어갈 데이터 타입 정의 (src/data/ProfileData.ts)

- 프로필 정보를 담을 데이터를 정의하고,

- 실제 프로필 데이터가 들어갈 객체 생성

src/data/ProfileData.ts

// 프로필 데이터 정의
export type ProfileData= {
    name: string
    position: string
    description: string
    image: string,
}


// 위에서 정의한 데이터로 객체 생성
export const createData = (
    name: string,
    position: string,
    description: string,
    image: string,
): ProfileData => (
    {name, position, description, image, }
)


// 객체 안에 들어갈 내 데이터
export const createMyData = () => {
    return createData (
        "chiro-J",
        "FrontEnd Developer",
        "React와 TailwindCSS를 배우는 중입니다.", 
        "https://avatars.githubusercontent.com/u/103028942"
    )
}

 

2. 프로필 카드 컴포넌트 만들기 (src/components/ProfileCard.tsx)

- 위에서 정의한 프로필 데이터 타입을 props로 받을 타입 정의 

- FC(함수형 컴포넌트) 정의

- 프로필 카드 컴포넌트 자체의 스타일 정하기

- JSX 형식으로 '컨테이너 > 이미지 > 이름 > 직책 > 설명' 순서로,

- tailwind 문법으로 꾸며서 작성

src/components/ProfileCard.tsx

import { FC } from 'react';
import type { MyCardProps } from '../pages';

// props로 넘겨주기 (아래 함수에서 패러미터로 받을 profile은 data쪽에서 정의한 데이터)
export type ProfileProps = {
    profile: D.ProfileData;
}


// 프로필 카드를 정의하는 함수 만들기
export const ProfileCard: FC<ProfileProps> = ({ profile }) => {
    return (
        <div className='flex flex-col items-center justify-center overflow-hidden bg-white rounded-lg p-2 w-[500px] h-[500px]'>
            <img src={profile.image} alt="profile_img" className='justify-center mb-4'/>
            <h2 className="mt-2 text-black text-bold">{profile.name}</h2>
            <p className="justify-center mt-2 text-gray-500">{profile.position}</p>
            <p className="justify-center mt-2 text-gray-500">{profile.description}</p>
        </div>
    )
}

 

 

3. 위에서 만든 카드 컴포넌트를 데이터와 함께 내 페이지에 배치하기 (src/pages/MyCard.tsx)

- data 쪽에서 정의한 프로필 데이터 import

- component 쪽에서 만들어둔 카드 컴포넌트 import

- 페이지 레이아웃 구성

- 카드 컴포넌트에 프로필 데이터를 props로 전달해서 렌더링

src/pages/MyCard.tsx

import { FC } from 'react'
import * as D from '../data'
import { ProfileCard } from '../components'


export type MyCardProps = {
    profile: D.ProfileData;
}


const MyCard: FC<MyCardProps> = ({ profile }) => {
    
    return (
        <div className="flex flex-wrap justify-center">
            <ProfileCard profile={profile}/>
        </div>
    )
}

export default MyCard;

 

4. 위에서 만든 것들 엮기 (~ 각 폴더의/index.ts)      [ ※ 각 폴더 : src 하위의 components, data, pages 폴더 ]

- 쉽게 말해 각각 다른 집에 사는 학생들을 셔틀버스에 한데 다 태워버리는 느낌으로 이해하자.

- 불러오는 건(import) 셔틀버스에서 학생 호명하기

src/data/

export * from './ProfileData'

src/components/index.ts

export * from './ProfileCard'

src/pages/

export * from './MyCard'

 

5. 내가 만든 페이지를 실제로 서빙하기 (App.tsx)

- pages 폴더에 있는 걸 import 받음

- 여기선 data 부분(ProfileData.ts)에서 맨 아래에 내 데이터로 객체를 만들어뒀기 때문에 아래 방식으로 적용.

src/App.tsx

import { createMyData } from './data'
import MyCard from './pages/MyCard'


export default function App() {

// 보통은 여기서 변수를 만들어서 아래 컴포넌트 props 로 넘겨준다.

  return (
    <main>
      <MyCard profile={createMyData()}/>
    </main>
  )
}

 

 

짜잔~ 완성!