저번시간 많은 데이터를 간단하게 쓰는 방법에 대해서 알아보기로 하였습니다
똑같은 내용 100줄 코드 쓰는거 귀찮잖아요
우선 저번에 쓴 코드가 무엇인지 먼저 보겠습니다
저번시간: State 변수 사용 예시
import { useState } from 'react';
function App() {
let [과자이름] = useState(['허니버터칩', '홈런볼', '꼬북칩']);
return (
<>
<h4>과자목록</h4>
<p>{과자이름[0]}</p>
<p>{과자이름[1]}</p>
<p>{과자이름[2]}</p>
...
<p>{과자이름[100]}</p>
</>
)
}
export default App;과자 이름이라는 state를 만들어 그 안에 들어있는 과자를 하나씩 출력하는 방법에 대해 알아봤는 데
이게 3개일때나 하드코딩을 하지, 100개정도 되면 뒤ㅣ지게 힘들어서 다이 하드 코딩이 될 것 같아요.
브루스 윌리스도 야근 때문에 울고갈지 몰라요
여기서 자바스크립트 문법에 있는 map이라는 Araay 메서드를 사용할 거예요
map이 뭔지 잠깐 설명할게요
map 메서드
const array = [1, 3, 5, 7];array 라는 배열은 요소로 숫자 1 3 5 7 을 가지고 있어요
이 각 요소를 대상으로 뭔가를 한번씩 해줄 때 써요
array.map(x => console.log(x)); // 1 3 5 71 3 5 7 각각을 한번씩 출력해달라고 했더니 진짜 1 3 5 7 을 보여주고요
const map1 = array.map(x => x);
console.log(map1); // [ 1, 3, 5, 7 ]이렇게 array1 을 map1 에 그대로 복사해서
출력하면 똑같은 결과가 나와요
각 요소를 하나씩 return 해서 새로운 배열에 담으라는 뜻이예요
const map2 = array.map(x => x * 2);
console.log(map2); // [ 2, 6, 10, 14 ]이렇게 각 요소에 2씩 곱해서 새로운 배열에 넘길 수도 있어요
중요한건 각 요소에 무언가를 해주고 새로운 배열을 리턴한다 는 점이예요
추가로 map에는 숨겨진 보물이 있습니다.
바로 두번쨰 인자에 index를 저장한다는 것인데요
이러한 인덱스를 react에서는 매우 잘 활용해야 합니다.
const map3 = array.map((x,i) => i);
console.log(map3); // [ 0, 1, 2, 3 ]첫번째 예시에서 x를 그대로 담아 출력했던 것처럼
이번 예시에서 i를 그대로 담아 인덱스 값을 출력 하였습니다.
const map4 = array.map((x,i) => `${i}번째 index: ${x}`);
console.log(map4);
// [ '0번째 index: 1', '1번째 index: 3', '2번째 index: 5', '3번째 index: 7' ]이런식으로 각 요소에 해당하는 값은 index를 기억하게 된다는 뜻입니다.
react에서의 map 사용
다시 돌아와서 지금 쓰여있는 코드를 map을 활용하는 방식으로 리팩토링해보겠습니다.
import { useState } from 'react';
function App() {
let [과자이름] = useState(['허니버터칩', '홈런볼', '꼬북칩']);
return (
<>
<h4>과자목록</h4>
<p>{과자이름[0]}</p>
<p>{과자이름[1]}</p>
<p>{과자이름[2]}</p>
...
<p>{과자이름[100]}</p>
</>
)
}
export default App;이렇게 직접 인덱스를 0 1 2 … 100 까지 찍어야 한다고 봅시다.
저희는 map을 사용해서 이 index값만 수정을 해주면 됩니다.
import { useState } from 'react';
function App() {
let [과자이름] = useState(['허니버터칩', '홈런볼', '꼬북칩']);
return (
<>
<h4>과자목록</h4>
{
과자이름.map((el, idx) => <p key={idx}>{el}</p>)
}
</>
)
}
export default App;이렇게 말이죠
map 함수는 JS문법이니 { } 안에 넣어주고
각 요소와 인덱스를 사용해서 <p> 요소를 반복해서 만들어줍니다.
이때 못보던 key가 생겼어요
뭐예요 갑자기
저도 몰라요 에러창에서 key를 넣으라고 잔소리해요
아마 반복되는 요소가 없도록 고유의 key값을 줘야하는 건가봐요
나중에 멋진 프로그램 만들어서 서버에서 받아오게 되는 데이터에는 각 데이터의 id가 존재해서
그거로 key 넣으면 된다는 데, 지금은 복잡한 생각하기 싫고 그냥 과자가 먹고 싶을 뿐이니까, index를 그대로 넣어줄게요
index도 겹칠 일은 없으니 그래도 되잖아요
과자이름.map((el, idx) => <p key={idx}>{el}</p>)이 한 줄이면 과자 이름이 1개든 100개든 10000개든 상관없이 다 보여줄거예요
이렇게 과자를 출력할 수 있게 되었는 데, 나열만 하면 뭐할거예요
메뉴판도 아니고 글자만 붙어있을 순 없잖아요 성의없게
다음 시간에는 진짜 주문하는 것처럼
리스트에 있는 항목을 담아서 갯수를 출력하는 과정을 진행해 볼게요
여기서 갑자기 props라던가 Component 라던가 import라던가 구조분해할당이라던가 어려운 단어들 쏟아져 나올건데
자바스크립트 문법에 기반해서 차근차근 진행해보도록 하겠습니다. 양이 많아지면 2개 글 분량으로 나눌 수도 있을 것 같아요.
오늘도 코딩하느라 머리 아프지만 과자를 생각하며 힘을 내보도록 해요
3줄 요약
useState에 배열넣고 map으로 돌려라
[인자 구성] 첫번째: 요소 / 두번째: 인덱스
정신건강을 위해 코딩을 할땐 과자를 먹든 커피를 먹든 뭘 입에 물고 하십쇼
