React 강좌 tutorial 5 - 뷰어 (웹툰서비스 만들기)

에피소드를 누르면 해당 뷰어로 이동합니다. 지금까지 해왔던 방식과 동일하므로 어렵지 않습니다.

우선 이미지를 더미 데이터에 넣기 위해 이전 편에서 사용했던 episode_list.json 파일에 이미지 리스트를 추가합니다.

/public/dummy/episode_list.json (전체 코드)

	...
	{
	"id": 8298,
	"title": "3화",
	"thumbnailImage": {
	"url": "http://t1.daumcdn.net/webtoon/op/d57837df38acb34b2a2411fc9e50eb48195ec2db"
	},
	"webtoonId" : 1,
	"images" : [
	"https://cdn.pixabay.com/photo/2018/07/14/15/27/cafe-3537801__480.jpg",
	"https://cdn.pixabay.com/photo/2018/07/12/02/32/basil-3532424__480.jpg",
	"https://cdn.pixabay.com/photo/2018/07/12/11/45/sunrise-3533173__480.jpg",
	"https://cdn.pixabay.com/photo/2018/05/30/15/31/rustic-3441673__480.jpg"
	],
	"dateCreated": "20180203000100"
	},
	...

view raw episode_list.json hosted with ❤ by GitHub

이후 전편과 동일하게 axios로 api를 불러와서 제목과, 이미지를 화면에 그려주면 끝납니다. props.match.params.episodeId 로 현재 에피소드의 ID와 일치하는 이미지들을 루프를 돌면서 그려줍니다.

/src/container/Viewer.js

	import React, { Component } from 'react';
	import axios from "axios/index";
	import {Link} from "react-router-dom";
	class Viewer extends Component{
	constructor(props){
	super(props)
	this.state = {
	episodeId : parseInt(props.match.params.episodeId, 10),
	episode : {}
	};
	}
	componentDidMount(){
	this._getEpisodeList();
	}
	_getEpisodeList(){
	const apiUrl = '/dummy/episode_list.json';
	axios.get(apiUrl)
	.then(data => {
	this.setState({
	episode : data.data.webtoonEpisodes.find(episode => (
	episode.id === this.state.episodeId
	))
	});
	})
	.catch(error => {
	console.log(error);
	});
	}
	render(){
	const episode = this.state.episode;
	return (
	<div className="wrap_viewer">
	{ episode.id ? (
	<div>
	<div className="top_viewer">
	{episode.title}
	<Link to={`/webtoon/${episode.webtoonId}`} className="btn_close">X</Link>
	</div>
	<div className="wrap_images">
	{ episode.images.map((img, index) => (
	<img key={index} src={img} />
	)) }
	</div>
	</div>
	) : (
	<span>LOADING...</span>
	) }
	</div>
	)
	}
	}
	export default Viewer;

view raw Viewer.js hosted with ❤ by GitHub

이번 강의의 모든 코드는 Github : tutorial_05 에서 확인하실 수 있습니다.

다음편 : React 강좌 tutorial 6 - GNB 처리 (웹툰서비스 만들기)