인프런 커뮤니티 질문&답변
작성한 질문수
async 함수 중복선언 문제 관련
해결된 질문
작성
·
406
·
수정됨
0
안녕하세요. 리액트 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); //제대로 된 결과
// }아랫부분의 주석 코드에서 함수 중복 선언 문제가 발생할 수 있으니 화살표 함수를 쓰라고 하셨는데요.
함수 중복 선언의 예제를 설명하시는건 이해가 됐는데
왜 저 코드가 함수 중복 선언인지 이해가 안가요.
위에 함수랑 주석된 함수 이름은 다른데
왜 중복선언인가요?
챗지피티한테 물어봤더니 자기도 모르겠대요ㅠ
그리고 여태 들었던 강의들보다 강사님 강의가 퀄리티가 너무 좋은 거 같아요
답변 1
0
안녕하세요! 치카치카님!
강의 재미있게 들어주셔서 감사합니다!^^
먼저, 중복선언될 수 있는 함수가 위에 크게 2개가 있네요!
function onClickSync(), function onClickAsync()
이렇게 2개의 함수는 function 키워드로 선언되어서 중복 선언될 수 있었죠?!
(중복선언이란 똑같은 이름으로 함수를 한 번 더 만드는 걸 의미해요!)
브라우저에서 개발자도구 콘솔창을 열고 아래와 같이 입력해 보세요
function qqq(){
console.log("안녕하세요")
}
function qqq(){
console.log("반갑습니다")
}이렇게 하고 qqq()를 실행시키게 되면 아래쪽인 반갑습니다만 나오고, 안녕하세요는 사라지는 문제가 발생합니다.
이러한 현상을 막기 위해서는 화살표함수나 함수표현식으로 함수를 만들어 주시는게 좋아요!
그런데, 지금 위에 보시면 onClickSync(), onClickAsync() 둘 다 function으로 만들어져 있어요!
물론, 지금 당장은 아니더라도 한 페이지에 코드가 1000줄 이런식으로 되면 똑같은 이름의 함수를 2번 만드는 실수를 저지를 수 있고, 그렇게 되면 먼저 선언된 함수는 의도와 다르게 사라질 수 있겠죠?!^^