async 함수 중복선언 문제 관련

Question

안녕하세요. 리액트 04-01-rest-get강의를 보다가   export default function RestGetPage() { function onClickAsync() { const result = axios.get("https://koreanjson.com/posts/1"); console.log(result); //Promise } // async function onClickSync() { // const result = await axios.get("https://koreanjson.com/posts/1"); => 함수 중복 선언 문제 // console.log(result); //제대로 된 결과 // } 아랫부분의 주석 코드에서 함수 중복 선언 문제가 발생할 수 있으니 화살표 함수를 쓰라고 하셨는데요. 함수 중복 선언의 예제를 설명하시는건 이해가 됐는데 왜 저 코드가 함수 중복 선언인지 이해가 안가요. 위에 함수랑 주석된 함수 이름은 다른데 왜 중복선언인가요? 챗지피티한테 물어봤더니 자기도 모르겠대요ㅠ 그리고 여태 들었던 강의들보다 강사님 강의가 퀄리티가 너무 좋은 거 같아요

노원두 · Answer

안녕하세요! 치카치카 님! 강의 재미있게 들어주셔서 감사합니다!^^ 먼저, 중복선언될 수 있는 함수가 위에 크게 2개가 있네요! function onClickSync(), function onClickAsync() 이렇게 2개의 함수는 function 키워드로 선언되어서 중복 선언 될 수 있었죠?! (중복선언이란 똑같은 이름으로 함수를 한 번 더 만드는 걸 의미 해요!) 브라우저에서 개발자도구 콘솔창을 열고 아래와 같이 입력해 보세요 function qqq(){ console.log("안녕하세요") } function qqq(){ console.log("반갑습니다") } 이렇게 하고 qqq()를 실행시키게 되면 아래쪽인 반갑습니다만 나오고, 안녕하세요는 사라지는 문제가 발생합니다. 이러한 현상을 막기 위해서는 화살표함수 나 함수표현식 으로 함수를 만들어 주시는게 좋아요! 그런데, 지금 위에 보시면 onClickSync(), onClickAsync() 둘 다 function으로 만들어져 있어요! 물론, 지금 당장은 아니더라도 한 페이지에 코드가 1000줄 이런식으로 되면 똑같은 이름의 함수를 2번 만드는 실수를 저지를 수 있고, 그렇게 되면 먼저 선언된 함수는 의도와 다르게 사라질 수 있겠죠?!^^