for 반복문 var과 let의 차이

[김동연]

질문 강의 주제 : [ (UI 제작 패턴) props를 응용한 상세페이지 만들기 ]

반복문으로 UI를 만들 때, map을 사용하는 방법과 함수로 정의하는 방법이 있었습니다.

map 말고도 함수로 하는법도 궁금하여 해당 강의의 내용(제목 클릭 시 상세(modal부분)에 제목 표시)를 함수형으로 만들었고, 코드는 사진과 같습니다.

제목 클릭 시, 몇번째 제목을 클릭했는지 저장하는 변수의 값은 아래와 같이 정의하여 사용하였습니다.
let [inputnum, inputnum변경] = useState(0)

반복문에서 사용되는 변수(i)를 var로 정의하였을 때는 inputnum변경(i)를 사용하였을 때 정상적으로 작동하지 않습니다. (글제목[i] 부분은 정상적으로 작동)

간단히 말씀드리면, var로 정의된 i를 이용하여 반복된 UI를 정의할 때 i를 첫번째로 사용하는 부분은 정상작동 O,  그 이후 사용되는 부분들만 정상작동 X 입니다.

반면 let으로 정의하였을 때는 inputnum변경(i)를 사용하여 반복된 UI를 정의할 때 i를 사용하는 부분이 모두 정상적으로 작동하였습니다.

var의 특징이 변수 재할당이 안된다라고만 알고있는데, 위 에서 사용하는 i 를 var로 선언했을때와 let으로 선언했을 때 차이는 무엇인가요?

[codingapple]

var을 쓰면

반복문이 다 돌고 나면 var i는 3이 됩니다

근데 그 때 inputnum변경(i)를 실행하려고 보면 i는 3밖에 없어서 에러가 나는 것입니다

반면 let을 쓰면 반복문 안에 i 변수를 반복문 돌 때마다 각각 0,1,2로 참조할 수 있는 scope를 만들어줘서 잘 됩니다 

 

[김동연]

오 그렇군요 감사합니다

[글쓴이]

글