React || Part1 블로그 제작 및 기초 문법_03
map : 많은 div들을 반복문으로 줄이기
map 함수란?
: 값과 인덱스를 인자로 받아 자동으로 for문을 돌려 값을 빼도록 해준다.
map 사용법 예시
1. array자료 갯수만큼 함수안의 코드 실행을 해준다.

2. 함수의 파라미터는 array안에 있던 자료 임
3. retrun 이후에 어떠한 값을 넣으면 array로 담아준다.
그럼 아래와 같이 보이는 것을 map 함수를 이용해서 줄여볼 수 있다.
보통 for 반복문을 돌려서 사용하면 되지만 JSX 안에서 사용할 수 없기 때문에 사용을 하려면
이렇게 사용하면 가능하지만, 상황과 본인의 스타일에 맞게 사용하면 된다.
처음에 이렇게 해보았더니 결과물이
이렇게 나와버렸다. practice 변수 안에는['남자코트추천', '강남우동추천', '파이썬독학'] 이렇게 담겨있어서 '남자코트추천' 다음 것 부터 선택이 되어 버렸고, 그 결과 3번째에는 아무것도 담기지 않은 모습이다.
그러므로
이렇게 써야하는 것이다.
혹은
두가지 방법 모두 같은 결과물이다.
두번째 것에서 함수 안에 있는 두번째 파라미터는 '반복문이 돌 때마다 0부터 1씩 증가하는 정수' 역할을 한다.
저번 시간에 했었던 것 처럼 좋아요 표시도 넣을 수 있는데 이 것에 문제점은 하나의 부분에 좋아요를 눌러도,
이렇게 다같이 올라가는 모습이다...
이것을 해결하는데 좀 오랜 시간이 걸렸는데 결국 답을 보며 문제 해결을 해보았는데,,
초기화된 빈 배열로 선언후
이렇게 코드를 작성해보았다.
여기서 포인트는 바로
이것이다.
처음에 👍 을 눌렀을 때, 해당 위치의 값을 증가시키기 위해 copy[i]값이 undefied 인 경우를 방지하기 위해 if문을 써서 해당 위치에 값이 존재하지 않더라도 0이 되게 하여 이후에 👍을 누를때마다 1씩 증가하게 해주었다.