ReactJS Basic - 3

duckkuri·2021년 10월 28일

ReactJS로_영화_웹_서비스_만들기 reactjs 개인공부 노마드코더 리액트 리액트입문 클론코딩

ReactJS로 영화 웹 서비스 만들기

목록 보기

3/4

javascript에서 `map` 사용법

예제코드

friends = ["mjung", "mj", "myungjin"]

friends.map(function(friend){
		return friends + "♥️"
})

자바스크립트를 사용하여 더 간단한 코드 만들기

// App.js
function Food({name}){
	return <h1>I like {name}</h1>
}

const foodILike = [
	{
		name:"samgyeobsal",
		image:"https://www.google.com/url?sa=i&url=http%3A%2F%2Fradyheng.blogspot.com%2F2011%2F10%2Fforeigners-pick-samgyeopsal-as-favorite.html&psig=AOvVaw26bDs0bMce4RFn8rRURvXb&ust=1635490271313000&source=images&cd=vfe&ved=0CAsQjRxqFwoTCKDj_JzC7PMCFQAAAAAdAAAAABAO"
	},
	{
		name:"pizza",
		image:"https://www.google.com/url?sa=i&url=https%3A%2F%2Fweb.dominos.co.kr%2Fgoods%2Fdetail%3Fdsp_ctgr%3DC0104%26code_01%3DRPZ011SL&psig=AOvVaw3DwAJS3r0zUQotyYbEoEx4&ust=1635490316157000&source=images&cd=vfe&ved=0CAsQjRxqFwoTCNCX4KzC7PMCFQAAAAAdAAAAABAD"
	},
	{
		name:"beef",
		image:"https://www.google.com/url?sa=i&url=https%3A%2F%2Famericanmeat.co.kr%2F%3Fkboard_content_redirect%3D486&psig=AOvVaw0Te2gb74MXfKUE6kTr5vEI&ust=1635490325818000&source=images&cd=vfe&ved=0CAsQjRxqFwoTCOiC_LLC7PMCFQAAAAAdAAAAABAO"
	},
	{
		name:"kimchi",
		image:"https://www.google.com/url?sa=i&url=https%3A%2F%2Fwww.coupang.com%2Fvp%2Fproducts%2F293458104&psig=AOvVaw0sTrYNlu5rOTnbyfIezPzF&ust=1635490340524000&source=images&cd=vfe&ved=0CAsQjRxqFwoTCIDYrcLC7PMCFQAAAAAdAAAAABAD"
	}
]

function App() {
  return (
    <div className="App">
		{/* dish : 각각의 아이템 이며, 오브젝트이다. */}
		{foodILike.map(dish => <Food name={dish.name} />)}
    </div>
  );
}

export default App;

방법 1 : 함수 정의를 즉석에서 하는 방법

function App() {
  return (
    <div className="App">
		{/* dish : 각각의 아이템 이며, 오브젝트이다. */}
		{foodILike.map(dish => <Food name={dish.name} picture={dish.image}/>)}
    </div>
  );
}

방법 2 : 함수 정의부를 따로 두는 방법

 function renderFood(dish){
	return <Food name={dish.name} picture={dish.image}/>
}

function App() {
  return (
    <div className="App">
		{foodILike.map(renderFood)}
    </div>
  );
}

React warning

리액트의 elemnet들은 유일해야한다.

Warning: Each child in a list should have a unique "key" prop.

: list 내의 child는 unique한 key prop을 가져야 한다.

오류가 나온 부분

const foodILike = [
	{
		name:"samgyeobsal",
		image:"https://external-content.duckduckgo.com/iu/?u=http%3A%2F%2Fpostfiles15.naver.net%2F20151214_110%2Fstormyou1_14500990691383pimS_JPEG%2F%25A4%25B1%25A4%25A4%25A4%25B7%25A4%25B1%25A4%25A4%25A4%25B7.jpg%3Ftype%3Dw773&f=1&nofb=1"
	},
	{
		name:"pizza",
		image:"https://external-content.duckduckgo.com/iu/?u=http%3A%2F%2Fimg.ezday.co.kr%2Fcache%2Fboard%2F2009%2F12%2F24%2F117aed6c219b12585f97c4f254cf3f1a.jpg&f=1&nofb=1"
	},
	{
		name:"beef",
		image:"https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fi.ytimg.com%2Fvi%2FPKPbTn3c7mI%2Fmaxres2.jpg&f=1&nofb=1"
	},
	{
		name:"kimchi",
		image:"https://external-content.duckduckgo.com/iu/?u=http%3A%2F%2Fkb80kimchi.cafe24.com%2Fweb%2Fproduct%2Fextra%2Fsmall%2F202012%2Fb70cc320e57d0490bc51fabf60940eeb.jpg&f=1&nofb=1"
	}
]

function App() {
  return (
    <div className="App">
		{/* dish : 각각의 아이템 이며, 오브젝트이다. */}
		{foodILike.map(dish => <Food name={dish.name} picture={dish.image}/>)}
    </div>
  );
}

해결 안

const foodILike = [
	{
		id:1,
		name:"samgyeobsal",
		image:"https://external-content.duckduckgo.com/iu/?u=http%3A%2F%2Fpostfiles15.naver.net%2F20151214_110%2Fstormyou1_14500990691383pimS_JPEG%2F%25A4%25B1%25A4%25A4%25A4%25B7%25A4%25B1%25A4%25A4%25A4%25B7.jpg%3Ftype%3Dw773&f=1&nofb=1"
	},
	{
		id:2,
		name:"pizza",
		image:"https://external-content.duckduckgo.com/iu/?u=http%3A%2F%2Fimg.ezday.co.kr%2Fcache%2Fboard%2F2009%2F12%2F24%2F117aed6c219b12585f97c4f254cf3f1a.jpg&f=1&nofb=1"
	},
	{
		id:3,
		name:"beef",
		image:"https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fi.ytimg.com%2Fvi%2FPKPbTn3c7mI%2Fmaxres2.jpg&f=1&nofb=1"
	},
	{
		id:4,
		name:"kimchi",
		image:"https://external-content.duckduckgo.com/iu/?u=http%3A%2F%2Fkb80kimchi.cafe24.com%2Fweb%2Fproduct%2Fextra%2Fsmall%2F202012%2Fb70cc320e57d0490bc51fabf60940eeb.jpg&f=1&nofb=1"
	}
]

function App() {
  return (
    <div className="App">
		{/* dish : 각각의 아이템 이며, 오브젝트이다. */}
		{foodILike.map(dish => 
			<Food key={dish.id} name={dish.name} picture={dish.image}/>)
		}
    </div>
  );
}