React || Part1 블로그 제작 및 기초 문법_03

map : 많은 div들을 반복문으로 줄이기

map 함수란?

 : 값과 인덱스를 인자로 받아 자동으로 for문을 돌려 값을 빼도록 해준다. 

map 사용법 예시

1. array자료 갯수만큼 함수안의 코드 실행을 해준다.

2. 함수의 파라미터는 array안에 있던 자료 임

3. retrun 이후에 어떠한 값을 넣으면 array로 담아준다.

그럼 아래와 같이 보이는 것을 map 함수를 이용해서 줄여볼 수 있다.



보통 for 반복문을 돌려서 사용하면 되지만 JSX 안에서 사용할 수 없기 때문에 사용을 하려면

이렇게 사용하면 가능하지만, 상황과 본인의 스타일에 맞게 사용하면 된다.

 

 

처음에 이렇게 해보았더니  결과물이

이렇게 나와버렸다. practice 변수 안에는['남자코트추천', '강남우동추천', '파이썬독학'] 이렇게 담겨있어서 '남자코트추천' 다음 것 부터 선택이 되어 버렸고, 그 결과 3번째에는 아무것도 담기지 않은 모습이다.

 

그러므로

 

이렇게 써야하는 것이다.

 

{practice.map(function (a) {

return (

<div className="list">

<h4>{a}</h4>

<p>2월 17일 발행</p>

</div>

);

})}

혹은

{

practice.map(function (a, i) {

return (

<div className="list">

<h4>{practice[i]}</h4>

<p>2월 17일 발행</p>

</div>

);

})}

두가지 방법 모두 같은 결과물이다.

두번째 것에서 함수 안에 있는 두번째 파라미터는 '반복문이 돌 때마다 0부터 1씩 증가하는 정수' 역할을 한다.

 

저번 시간에 했었던 것 처럼 좋아요 표시도 넣을 수 있는데 이 것에 문제점은 하나의 부분에 좋아요를 눌러도,

 

이렇게 다같이 올라가는 모습이다...

 

이것을 해결하는데 좀 오랜 시간이 걸렸는데 결국 답을 보며 문제 해결을 해보았는데,,

 

let [good, setGood] = useState([]); 

 

초기화된 빈 배열로 선언후

{practice.map(function (a, i) {

return (

<div className="list">

<h4>

{practice[i]}

<spen

onClick={() => {

let copy = [...good];

if (copy[i] === undefined) {

copy[i] = 0; // 초기값 설정

}

copy[i] = copy[i] + 1;

setGood(copy);

}}

>

👍

</spen>

{good[i]}

</h4>

이렇게 코드를 작성해보았다.

 

여기서 포인트는 바로 

 

if (copy[i] === undefined) {

copy[i] = 0; // 초기값 설정

}

이것이다.

 

처음에 👍 을 눌렀을 때, 해당 위치의 값을 증가시키기 위해 copy[i]값이 undefied 인 경우를 방지하기 위해 if문을 써서 해당 위치에 값이 존재하지 않더라도 0이 되게 하여 이후에 👍을 누를때마다 1씩 증가하게 해주었다.