programmerGround 개발 - 임시 데이터를 활용한 컴포넌트 구축(2021.02.28)

안녕하세요! 새콤하고달콤입니다.

오랜만에 programmerGround를 만져서.. ㅋㅋㅋㅋ

 

임시 데이터를 활용해서 컴포넌트 구축한 경험을 공유하도록 하겠습니다!!

 

저는 아직 api호출을 진행하지 않았기 떄문에 mockup 소위 가짜데이터를 이용해서 컴포넌트를 생성하는 로직을 구현하였습니다.

 

1. 가짜 데이터 만들기

 

- 일단 id, title, date를 가지는 객체 배열을 생성하였습니다.

const playgroundData = {
	content: [
		{
			id: '1',
			title: 'TypeScript Making',
			date: '2021.01.09',
		},
		{
			id: '2',
			title: 'SVG Making',
			date: '2021.01.17',
		},
		{
			id: '3',
			title: 'Spring Core',
			date: '2021.01.27',
		},
		{
			id: '4',
			title: 'React',
			date: '2021.02.28',
		},
	],
};
export default playgroundData;

 

그리고 map을 이용해서 PlaygroundContent 컴포넌트를 배열 원소 개수만큼 보여주는 로직을 구현하였습니다. 

 

import React from 'react';
import Header from '@src/components/header';
import SearchBar from '@src/components/searchBar';
import Bone from '@src/components/Common/bone';
import PlaygroundContent from '@src/components/playgroundContent';
import playgroundData from '@src/data/playground';
import * as StyledComponent from './style';

const PlayGroundPage = () => {
	const groundData = playgroundData.content;
	return (
		<>
			<Header />
			<StyledComponent.mainContainer>
				<StyledComponent.SearchContainer>
					<SearchBar />
					<StyledComponent.ModeContainer>
						<Bone />
					</StyledComponent.ModeContainer>
				</StyledComponent.SearchContainer>
				<StyledComponent.PlayGroundContainer>
					{groundData.map((v) => {
						return (
							<PlaygroundContent key={v.id} title={v.title} date={v.date} />
						);
					})}
				</StyledComponent.PlayGroundContainer>
			</StyledComponent.mainContainer>
		</>
	);
};
export default PlayGroundPage;

 

playgroundContent는 다음과 같이 구현하였습니다.

타입스크립트를 이용해서 title과 date의 타입을 지정해주었습니다.

좀 더 간결한 코드를 위해서 types 디렉토리에 뺄 예정입니다(향후!!)

/* eslint-disable react/prop-types */
import React from 'react';
import * as StyledComponent from './style';

interface Playground {
	title: string;
	date: string;
}

const PlaygroundContent = ({ title, date }: Playground) => {
	return (
		<>
			<StyledComponent.PlaygroundContent>
				<StyledComponent.PlaygroundHeader>
					<StyledComponent.PlaygroundTitle>
						{title}
					</StyledComponent.PlaygroundTitle>
					<StyledComponent.PlaygroundDate>
						{date}
					</StyledComponent.PlaygroundDate>
				</StyledComponent.PlaygroundHeader>
			</StyledComponent.PlaygroundContent>
		</>
	);
};

export default PlaygroundContent;

 

결과는 다음과 같습니다.

 

 

내일은 나머지 content를 채우고, 로그인 화면으로 넘어갈 때 예외처리도 진행할 예정입니다.