리그오브레전드의 챔피언과 정보를 리스트로 출력해보자.
// index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import reportWebVitals from './reportWebVitals';
function ChampionList() {
const champions = [
{
id: 1,
name: '갱플랭크',
skill: '혀어어어업상'
},
{
id: 2,
name: '갈리오',
skill: '단호한 일격'
},
{
id: 3,
name: '가렌',
skill: '결정타'
}
];
return (
<div>
<div>
<b>{champions[0].name}</b> <br/>
<span>q 스킬: {champions[0].skill}</span>
<div><br/></div>
</div>
<div>
<b>{champions[1].name}</b> <br/>
<span>q 스킬: {champions[1].skill}</span>
<div><br/></div>
</div>
<div>
<b>{champions[2].name}</b> <br/>
<span>q 스킬: {champions[2].skill}</span>
<div><br/></div>
</div>
</div>
);
}
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<React.StrictMode>
<ChampionList />
</React.StrictMode>
);
reportWebVitals();
위 코드의 경우 list가 3개밖에 없지만 이게 많아지면 코드가 매우 길어질 수 있다.
이를 해결하기 위해 다음과 같이 Champion function을 하나 만들어주자.
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import reportWebVitals from './reportWebVitals';
function Champion({champion}){
return(
<div>
<b>{champion.name}</b> <br/>
<span>q 스킬: {champion.skill}</span>
<div><br/></div>
</div>
)
}
function ChampionList() {
const champions = [
{
id: 1,
name: '갱플랭크',
skill: '혀어어어업상'
},
{
id: 2,
name: '갈리오',
skill: '단호한 일격'
},
{
id: 3,
name: '가렌',
skill: '결정타'
}
];
return (
<div>
<Champion champion={champions[0]}/>
<Champion champion={champions[1]}/>
<Champion champion={champions[2]}/>
</div>
);
}
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<React.StrictMode>
<ChampionList />
</React.StrictMode>
);
reportWebVitals();
그래도 아직 코드가 길어질 수 있으니 더 짧게 만들어보자.
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import reportWebVitals from './reportWebVitals';
function Champion({champion}){
return(
<div>
<b>{champion.name}</b> <br/>
<span>q 스킬: {champion.skill}</span>
<div><br/></div>
</div>
)
}
function ChampionList() {
const champions = [
{
id: 1,
name: '갱플랭크',
skill: '혀어어어업상'
},
{
id: 2,
name: '갈리오',
skill: '단호한 일격'
},
{
id: 3,
name: '가렌',
skill: '결정타'
}
];
return (
<div>
{champions.map(champion =>(
<Champion champion={champion} key={champion.id}/>
))}
</div>
);
}
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<React.StrictMode>
<ChampionList />
</React.StrictMode>
);
reportWebVitals();
map을 사용하여 리스트를 알아서 렌더링 할 수 있게끔 만들었다.
map 함수 안에 champion 태그에 key={champion.id}를 넣어줬는데 이것은 배열의 삽입,삭제 후 재랜더링 할 때 더 빠르게 해준다.