[1장][희석] 리액트 개발을 위해 꼭 알아야 할 자바스크립트
Closed this issue · 3 comments
퀴즈
문제 1.
for (var i = 0; i < 5; i++) {
setTimeout(function () {
console.log(i)
}, i * 1000)
}
위 코드에서 문제점은 무엇인가요?
위 코드를 정상적으로 실행시키기 위해서는 어떤 방법이 있을까요?
문제 2.
리액트에서 얕은 복사를 사용하는 이유는 무엇인가요?
답
정답
해결방법으로는 let을 사용하기
즉시 실행함수를 사용하기가 있다.
문제2.
완벽하게 비교하기 위한 재귀문을 넣었다면 랜더링 성능에 악영향을 끼쳤을 것이다.
댓글 작성법
(다음과 같이 답을 작성해 댓글로 달아주세요)
<details>
<summary>정답</summary>
<div markdown="1">
정답 설명
</div>
</details>
문제1 : var는 함수 레벨 스코프이기에 i가 전역 변수로 되어버린다. 이에 값은 모두 5가 될 것이다.
이를 해결하기 위해 블록 레벨 스코프인 let을 사용하거나, 함수의 인자로 넘겨줄 수 있게 만드는 즉시 실행함수를 사용할 수 있다.
문제2 : props 객체를 깊은 복사하게 되면 재귀적으로 검사를 해야해서 성능상에 문제가 생길 수 있다.
-
for 문의 함수 스코프는 루프를 돌 때마다 새로운 렉시컬 환경을 생성한다. 이때 실행 컨텍스트의 렉시컬 환경으로 교체해 값을 등록하는데, 이때문에 전역 변수로 등록되어 원하지 않는 결과가 나올 수 있다.
정상적으로 실행시키기 위해서는 let을 사용하거나 즉시실행함수를 통해 스코프를 한 번 더 중첩해 작성하면 된다. -
만약 재귀문을 통한 깊은 복사를 구현했다면 메모리 성능에 좋지 않을 수 있다.
var로 반복문을 돌면 var가 전역 변수이기 떄문에 for문이 종료된 시점의 i인 4가 된다.
블록 레벨 스코프를 갖는 let으로 바꾼다.
결국 객체를 모든 깊이까지 비교해야 하면 재귀적으로 검사를 수행해야 하는데 이 경우 성능 상 문제가 생길 수 있다.!