개별 html 좋아요 숫자 구현하기 / 숙제 질문

[이다혜]

안녕하세요 코딩애플님 제가 두 가지를 구현해봤는데 두개 다 같은 출력이 되어 이유를 모르겠어 글을 남깁니다.
출력글 : 'i' is not defined.

===================1======================

import React, { useState } from "react";
import "./Main.css";

const Main = () => {
let [글제목, 글제목변경] = useState([
"남자코트 추천",
"강남 우동맛집",
"파이썬 독학",
 ]);

let [좋아요, 좋아요추가] = useState([0, 0, 0]);

function 좋아요함수() {
let result = [...좋아요];
result[i] = result[i] + 1;
좋아요추가(result);
 }

return (
<div className="App">
<div className="black-nav">
<h4>ReactBlog</h4>
</div>
<div className="list" key={i}>
<h4>
{글제목[0]}
<span onClick={좋아요함수}>👍 {좋아요[i]}</span>
</h4>
<p>12/17</p>
</div>
<div className="list" key={i}>
<h4>
{글제목[1]}
<span onClick={좋아요함수}>👍 {좋아요[i]}</span>
</h4>
<p>12/17</p>
</div>
<div className="list" key={i}>
<h4>
{글제목[2]}
<span onClick={좋아요함수}>👍 {좋아요[i]}</span>
</h4>
<p>12/17</p>
</div>
</div>
 );
};

export default Main;
===============================================================

================================2===============================

import React, { useState } from "react";
import "./Main.css";

const Main = () => {
let [글제목, 글제목변경] = useState([
"남자코트 추천",
"강남 우동맛집",
"파이썬 독학",
 ]);

let [좋아요, 좋아요추가] = useState([0, 0, 0]);

function 좋아요함수() {
let copy = [...좋아요];
copy[i] = copy[i] + 1;
좋아요추가(copy);
 }

return (
<div className="App">
{글제목.map(function (a, i) {
return (
<div className="list" key={i}>
<h4>{글제목[i]}</h4>
<span onClick={좋아요함수}>👍 {좋아요[i]}</span>
<p>12/17</p>
</div>
 );
 })}
</div>
 );
};

export default Main;
===============================================================

[codingapple]

함수 주변에 i 변수가 없어서그렇습니다
함수안의 변수는 파라미터같은걸로 입력받을 수 있게 바꾸는게 좋습니다

[이다혜]

function 좋아요함수() {
let i = 0 
let result = [...좋아요];
result[i] = result[i] + 1;
좋아요추가(result);
 }

이렇게 하는게 맞을까요 ??

[이다혜]

아래 첫번째 코드는 알려주신 대로 적은 코드인데 왜 i 변수가 따로 선언되지 않았나요?
map 함수의 Function 때문인가요??
그렇다면 아래의 두번째 코드는 어떤 부분이 문제인가요? 이해가되질 않습니다
조금만 더 자세하게 설명 부탁드려요

======= 1 ============
return (
<div className="App">
  <div className="black-nav">
    <h4 onClick={clickModal}>ReactBlog</h4>
  </div>
  <button onClick={변경함수}>글수정버튼</button>
  <button onClick={정렬함수}>정렬버튼</button>
  {글제목.map(function (a, i) {
    return (
    <div className="list" key={i}>
    <h4>{글제목[i]}</h4>
    <span
    onClick={() => {
    let copy = [...좋아요];
    copy[i] = copy[i] + 1;
    좋아요추가(copy);
     }}>👍 {좋아요[i]}</span>
    <p>12/17</p>
  </div>
 );
 })}
{modal === true ? <Modal /> : null}
</div>
 );

======= 2 ============
import React, { useState } from "react";
import "./Main.css";
const Main = () => {
let [글제목, 글제목변경] = useState([
"남자코트 추천",
"강남 우동맛집",
"파이썬 독학",
 ]);
let [좋아요, 좋아요추가] = useState([0, 0, 0]);
function 좋아요함수() {
let copy = [...좋아요];
copy[i] = copy[i] + 1;
좋아요추가(copy);
 }
return (
<div className="App">
{글제목.map(function (a, i) {
return (
<div className="list" key={i}>
<h4>{글제목[i]}</h4>
<span onClick={좋아요함수}>👍 {좋아요[i]}</span>
<p>12/17</p>
</div>
 );
 })}
</div>
 );
};
export default Main;

[codingapple]

function 좋아요함수(a) {
let copy = [...좋아요];
copy[a] = copy[a] + 1;
좋아요추가(copy);
}

<span onClick={()=>{ 좋아요함수(i) }}>
합시다 

[글쓴이]

글