React 기본 학습 -5. 반복문
리액트 강좌를 보면서 학습한 내용 정리용.
반복문
1. 반복문 (map)
예제 1
<ul>
{['1','2','3','4'].map((v) => {
return (
<li>{v}</li>
);
})}
</ul>
예제 1 결과
1
2
3
4
예제 2
<ul>
{[['사과', '빨강'],['바나나', '노랑'],['포도', '보라'],['귤', '오렌지']].map((v) => {
return (
<li>{v[0]} - {v[1]}</li>
);
})}
</ul>
예제 2 결과
사과 - 빨강
바나나 - 노랑
포도 - 보라
귤 - 오렌지
2. 반복문 (key)
리액트가 vue.js에 비해 반복문이 좀 깔끔하지 않다는듯.
예제 1
<ul>
{[{fruit: '사과', color: '빨강'},{fruit: '바나나', color: '노랑'},{fruit: '포도', color: '보라'},{fruit: '귤', color: '오렌지'}
].map((v, i) => {
return (
<li key={v.fruit + v.color}>{i} : {v.fruit} - {v.color}</li>
);
})}
</ul>
예제 1 결과
0 : 사과 - 빨강
1 : 바나나 - 노랑
2 : 포도 - 보라
3 : 귤 - 오렌지
주의
- key가 선언되어 있지 않으면 콘솔에 “Warning: Each child in a list should have a unique “key” prop.” 에러가 발생한다.
- 에러가 표시되는 이유는 key 는 화면에 표시는 되지 않지만 리액트가 성능최적화를 할때 사용하는 키이기 때문에 고유한 값으로 선언해 주어야 하기 때문이다.
- 리액트는 key 를 보고 같은 컴포넌트인지 아닌지 판단한다. key 값이 중복될 가능성이 있으면 어떻게 하든간에 겹치지 않는 값이 선언될 수 있도록 설정한다.(실무에서 자주 생기는 문제)
자주하는 실수
map((v, i) 에서 i가 index로 고유한 값이라고 생각해서 key 값에 <li key={i}>{i} : {v.fruit} - {v.color}</li> 이렇게 key={i} 하는 경우가 많은데 차후에 성능 최적화 할때 문제가 많이 생기니까 하면 안된다. i 자체를 key에 안쓰는것이 좋다.
리액트 개발시에는 이 key 정하는게 쓸데없이 귀찮다.
단 요소가 추가만 되는 배열인 경우는 i를 써도 되긴 한다는듯. 하지만 추가삭제 변동이 생길 수 있는 반복문의 경우는 i 사용시에 피 보는 경우가 많은 모양.
예제 1 소스 개선 방법-1-1. return 생략-중괄호 있음
화살표 함수(=>) 는 return 생략 가능함. 화살표 함수에서 중괄호가 없는건 return 의 의미하기 때문에 예제 1의 소스를 아래와 같이 return 없이 소괄호”()” 또는 괄호 없이 선언 가능.
<ul>
{[{fruit: '사과', color: '빨강'},{fruit: '바나나', color: '노랑'},{fruit: '포도', color: '보라'},{fruit: '귤', color: '오렌지'}
].map((v, i) => (
<li key={v.fruit + v.color}>{i} : {v.fruit} - {v.color}</li>
))}
</ul>
예제 1 소스 개선 방법-1-2. return 생략-중괄호 없음
<ul>
{[{fruit: '사과', color: '빨강'},{fruit: '바나나', color: '노랑'},{fruit: '포도', color: '보라'},{fruit: '귤', color: '오렌지'}
].map((v, i) =>
<li key={v.fruit + v.color}>{i} : {v.fruit} - {v.color}</li>
)}
</ul>
예제 1 소스 개선방법-2. 코드 리팩토링
NumberBaseball.jsx (리팩토링 전)
import React, { Component } from 'react'; // 이렇게 합쳐서 쓸 수 있다.
class NumberBaseball extends Component {
render(){
return(
<>
<ul>
{[['사과', '빨강'],['바나나', '노랑'],['포도', '보라'],['귤', '오렌지']].map((v) => {
return (
<li>{v[0]} - {v[1]}</li>
);
})}
</ul>
</>
);
}
}
NumberBaseball.jsx (리팩토링 후)
import React, { Component } from 'React'; // 이렇게 합쳐서 쓸 수 있다.
class NumberBaseball extends Component {
fruits = [
{fruit: '사과', color: '빨강'},
{fruit: '바나나', color: '노랑'},
{fruit: '포도', color: '보라'},
{fruit: '귤', color: '오렌지'}
];
render(){
return(
<>
<ul>
{this.fruits.map((v, i) =>
<li key={v.fruit + v.color}>{i} : {v.fruit} - {v.color}</li>
)}
</ul>
</>
);
}
}
Pie's Tech Note
생계형 개발자의 메모장