React Mockdata

📝 개요

 

프론트 개발을 하다보면 UI 구성에 필요한 데이터가 생길 수 있다. 데이터가 정적인 경우 UI에 필요한 데이터를 서버에서 가져오지 않고 프론트에서 직접 구성한다. 서버에서 받아야 하는 값이라도 백엔드 API가 완성되지 않았을 수 있다. 이때 서버에서 받을 값을 예상해서 UI 개발을 진행할 수 있다. UI를 표시하기 위해 필요한 상수데이터, 그리고 API를 모방하기 위한 mock data를 어떻게 만들고 활용하는지 알아본다.

 

---

 

상수 데이터

이름 그대로 변하지 않는 데이터로 정적인 데이터를 의미한다. UI 구성에 필요하지만 동적으로 변하지 않아서 백엔드 API 등을 통해서 가져올 필요가 없는 정적인 데이터들을 상수 데이터로 만들어 UI를 효율적으로 구성할 수 있다.

 

상수 데이터를 사용하는 이유로는 반복되는 UI를 하드코딩으로 일일이 만들게 되면, 코드가 길어져서 가독성이 좋지 않고 수정이 필요할 때 해당 부분을 찾기 힘들어져 유지보수가 힘들어진다. 이런 반복되는 UI를 상수데이터와 Array.map() 함수의 조합을 통해서 간결하게 표시할 수 있다.

 

예제

변수가 명백히 변하지 않는 상수 데이터라는 것을 표시하기 위해서 '대문자 + snake_case'를 통해서 변수의 이름을 짓는 컨벤션이 있다.

// 상수 데이터 선언
const USER_LIST = [
	{
    	id: 1,
        userName: 'apple',
        userPhoto: 'images/Main/star.avif';
    },
    {
    	id: 2,
        userName: 'apple',
        userPhoto: 'images/Main/couple.avif';
    }
];

// 상수 데이터를 사용할 페이지에 아래 코드 입력
{USER_LIST.map(comment => {
	return(
    	<Profile
        	key={comment.id}
            name={comment.userName}
            photo={comment.userPhoto}
        />
    );
})}

 

---

 

Mock data

mock data는 가짜 데이터, 샘플 데이터로 해석할 수 있다. 실제 API에서 받아온 데이터가 아닌 프론트엔드 개발자가 필요에 의해 샘플로 만들어 본 데이터를 의미한다.

 

mock data를 사용하는 이유는 프론트엔드 개발을 진행하려는데 필요한 백엔드 API가 완성되지 않는 경우가 있다. 이 때 백엔드에서 API가 완성될 때까지 기다리는게 아닌, mock data를 만들어서 데이터가 들어오는 상황을 대비하고 데이터에 맞게 UI가 의도한대로 구현되는지 확인해야 한다.

 

예제

mock data는 public > data 디렉토리 내에 .json 파일로 생성해야 한다.

[
	{
    	id: 1,
        userName: 'apple',
        userPhoto: 'images/Main/star.avif';
    },
    {
    	id: 2,
        userName: 'apple',
        userPhoto: 'images/Main/couple.avif';
    }
]

 

mock data 호출은 http://localhost:3000/data/userData.json를 API 주소로 생각하고 http 요청을 통해서 API 요청을 보내고 응답을 받아본다.

function UserList() {
	const [userList, setUserList] = useState([]);
    
    useEffect(() => {
    	fetch('http://localhost:3000/data/userData.json', {
        	method: 'GET'
        })
        	.then(res => res.json())
            .then(data => {
            	setUserList(data); // userList에 userData.json이 들어가고,
            });
    }, [])

	...생략
	{userList.map(comment => { // userList의 id, userName, userPhoto를 컴포넌트에 보내준다.
        return(
            <Profile
                key={comment.id}
                name={comment.userName}
                photo={comment.userPhoto}
            />
        );
    })}

}