인프런 커뮤니티 질문&답변

강사님 안녕하세요
항상 상세한 답변을 주시는 점 감사드립니다.
아래의 코드를 보고 질문을 받아주시면 감사하겠습니다.

import './App.css';
import Counter from './Counter';
import Container from './Container';
import {useEffect, useState} from "react";
import MyHeader from './MyHeader.js'

export default function App() {
  const [state, setState] = useState({ a: 0, b: 0 });

  const onClick = () => {
    const c=10;
    setState(c=>({
      a: c + 1
    }));
  };

  return (
    <div className="App">
      <div>a : {state.a}</div>
      <button onClick={onClick}>증가</button>
    </div>
  );
}

1번째 경우
원래는 아래의 코드처럼 setState의 콜백함수의 인자에 state를 넣는 게 맞습니다.

const c=10;
 setState(state=>({
      a: c + 1  // 이 줄의 c는 1번째 줄의 c를 가리키므로 a: 10 + 1 과 같습니다.
    }));

이때는 a:c+1에서의 c가 함수 밖에 선언된 맨위의 const c= 10의 c를 가리킵니다.

2번째 경우
일부러 setState의 콜백함수의 인자를 state가 아닌 c로 적어봤습니다.

const c=10;
 setState(c=>({   //이 부분 변경 state 를 지우고 c로
      a: c + 1   // 이 줄에서의 c는 1번째 줄의 c를 가리키지 않습니다.
    }));

그러자 a: c + 1 에서의 c는 1번째 줄의 c가 아닌, 콜백함수 인자로 들어간 2번째 줄의 c를 가리킵니다.

그래서 변수의 스코프를 공부하고 싶어서 조언을 구하고 싶습니다.

1번째 질문을 드립니다.

변수가 const, let, var 인지에 따라서 스코프가 다른 것으로 아는데

콜백함수의 인자로 들어간 변수는 const인지 let인지, var 인지 질문드리고 싶습니다.

2번째 질문을 드립니다.

이 부분에 대해 학습하면 좋을 자료 링크를 추천해주시면 감사하겠습니다.

저도 현재 변수 스코프에 대해 다시 공부하는 중입니다.

3번째 질문을 드립니다.

const c=10;
 setState(c=>({   //이 부분 변경 state 를 지우고 c로
      a: c + 1   // 이 줄에서의 c는 1번째 줄의 c를 가리키지 않습니다.
    }));

 에서
2번째 줄의 콜백함수 인자의 c는
1번째 줄의 c를 가리키지 못하는 이유에 대해 질문드리고 싶습니다.

4번째 질문을 드립니다.
const c=10;
setState(state=>({ //이 부분 변경 state 를 지우고 c로
a: c + 1 // 이 줄에서의 c는 1번째 줄의 c를 가리키지 않습니다.
}));
3번째 줄의 c는 1번째 줄의 c를 가리킬 수 있는 이유에 대해 질문드리고 싶습니다

감사합니다.