1. 위의 코드 중 map() 메서드의 사용법이 생소했다.
분명 js에서 map() 메서드를 배운 바로는, Literable 객체( Array, Set(), Map() )이며,
iterator 함수인 next() 를 통해 내부 요소의 순회가 가능하다는 걸로 기억하고 코드의 생김새도
아래와 같은 형식이었는데 전혀 달랐다.
const myMap = new Map([
[1, 'one'],
[2, 'two'],
[3, 'three'],
]);
2. 찾아보니 해당 메서드는 Array.prototype.map() 메서드로 다음과 같이 콜백함수를 담는 형태였다.
arr.map(callback(currentValue[, index[, array]])[, thisArg])3. 따라서 첫번 째 메서드는 [1, 2, 3] 배열을 map으로 순회하고, 콜백함수의 a로 array의 value값을 받아
다음 console.log() 를 차례대로 실행하라는 뜻이었다.
두번 째 메서드는 return 값을 a로 받아 순회하면서 cb 함수를 실행한다.
이때, key 속성을 설정하지 않아도 코드는 정상적으로 작동하나,
리액트가 렌더링 할 때 key 속성이 없으면 전체를 렌더링 해서 비효율적이다.
그러므로 map()을 사용할 땐 항상 key 속성을 넣어야한다.
4. 항상 레퍼런스를 먼저 참고하는 습관을 기르자. 모든 것은 그곳에 있다.
5. 참고 https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/map
6. map() 메서드로 순회가 됬으면 다른 iterator 객체로도 가능하겠다싶어서 Symbol.iterator() 메서드를 사용해 코드를 바꿔보려고 했다.
코드 형식은 맞는 것 같지만 아래의 상태로는 출력이 안된다.
아무래도 return 값을 줘야 할 것 같은데 어떻게 해야할까?
function App() {
//생략
let [따봉, 따봉변경] = useState(0);
let e글제목 = 글제목[Symbol.iterator]();
console.log({e글제목});
const thumbUp = (e글제목) => {
for (const i of e글제목) {
<div className="list">
<h4>{글제목[i]} <span onClick={()=> { 따봉변경(따봉 + 1) }}>👍</span>
{따봉}</h4>
<p>2월 18일 발행</p>
</div>
}
}
7. 결국 chatGpt에게 답을 얻었다.
const thumbUp = () => {
for (const 글 of 글제목) {
console.log(글);
return (
<div className="list">
<h4>
{글} <span onClick={() => { 따봉변경(따봉 + 1) }}>👍</span>
{따봉}
</h4>
<p>2월 18일 발행</p>
</div>
);
}
};위의 코드는 얼핏보면 정상적으로 작동 할 것 같지만
return 문을 만나면 for of 반복문이 바로 종료되기 때문에 1번밖에 실행되지 않는다.
function App() {
//생략
const thumbUp = () => {
const thumbUpElements = [];
const iterator = 글제목[Symbol.iterator]();
let i = 0;
for (const value of iterator) {
thumbUpElements.push(
<div className="list" key={i}>
<h4>
{value}{" "} // 띄어쓰기
<span onClick={() => 따봉변경(따봉 + 1)}>👍</span>
{따봉}
</h4>
<p>2월 18일 발행</p>
</div>
);
i++;
}
return thumbUpElements;
};
return (
<div>
//생략
{thumbUp()}
</div>
);
}따라서 thumbUpElement 라는 배열에 thmbUp 에서 생성한 요소를 담아 반환하게끔 해야한다.
그리고 map() 메서드뿐만 아니라 반복문을 사용할 때는 항상 key 속성을 넣어줘야한다는 것을 잊지말자.
8. 그래서 위의 코드보다는 아래와 같이 entries() 메서드를 쓰는 것이 좋다.
const thumbUp = () => {
const thumbUpElements = [];
for (const [index, value] of 글제목.entries()) {
thumbUpElements.push(
<div className="list" key={index}>
<h4>
{value}{" "}
<span onClick={() => 따봉변경(따봉 + 1)}>👍</span>
{따봉}
</h4>
<p>2월 18일 발행</p>
</div>
);
}
return thumbUpElements;
};entries() 메서드는 배열의 각 인덱스에 대한 키/값 쌍을 가지는 새로운 Array Iterator 객체를 반환한다.
그러므로 이 전 코드와 같이 key 속성을 사용하기 위해 별도로 let i를 선언하지 않아도 된다.
9. 참고 https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/map
